CSS渐变阴影圆角生成
可视化调节线性、径向、锥形渐变与多层阴影、四角圆角，实时预览并输出CSS代码
预览
渐变设置
0deg 从下往上，90deg 从左往右
色标
%
%
CSS 代码
.your-element {
background: linear-gradient(135deg, #3498db 0%, #8e44ad 100%);
}
现代浏览器不再需要 -webkit-linear-gradient 等前缀；如需兼容非常老的 Android WebView，可自行补充前缀版本。
功能介绍
CSS渐变阴影圆角生成把三类最常写的视觉样式做成可视化面板。渐变支持linear、radial、conic三种类型与对应的repeating重复形式，色标可增删到八个并分别调整颜色、位置与透明度，角度或圆心位置直接拖动滑块调节，内置多套配色预设可一键套用。阴影支持box-shadow与text-shadow，可叠加多层并分别设置X与Y偏移、模糊、扩展、颜色与透明度，还可切换为inset内阴影，另提供filter的drop-shadow写法用于给不规则图形加阴影。圆角支持四角联动与四角独立两种模式，可做出胶囊、叶形等常见形状。预览区使用棋盘格底纹，便于观察半透明效果的真实叠加结果。所有输出都是标准CSS，可直接复制到样式表。
使用说明
1. 顶部切换渐变、阴影、圆角三个面板；2. 渐变面板先选类型，再拖动角度或圆心，点击色标下方的加号增加颜色节点；3. 阴影面板点击"添加一层"叠加多重阴影，多层阴影是做出层次感的关键，通常小模糊加大模糊两层效果最自然；4. 圆角面板可切换联动或独立调节四个角；5. 随时在预览区查看效果，棋盘底纹用于判断透明度；6. 点击"复制CSS"取得代码；7. conic-gradient在较老的浏览器不支持，用于关键视觉时请准备回退色；8. 阴影的模糊半径不要过大，超过24px通常会显得发灰而不是有立体感。