CSS 效果生成器（在线免费）
可视化调参生成渐变、阴影、圆角与滤镜，实时预览并复制 CSS 代码。在浏览器本地运行：免费、免安装、免注册，文件不上传服务器。
如何使用CSS 效果生成器
- 打开本页面，输入需要处理的内容；
- 按需调整参数（效果类型、渐变类型、渐变角度、颜色 1）；
- 点击执行，结果即时呈现。
CSS 效果生成器的参数怎么选
- 效果类型 —— 可选 渐变 / 阴影 / 圆角 / 滤镜，默认渐变。
- 渐变类型 —— 可选 线性渐变 / 径向渐变，默认线性渐变。
- 渐变角度 —— 填数字，默认 135。
- 颜色 1 —— 如「如 #4cc9f0」。
- 颜色 2 —— 如「如 #7209b7」。
- 颜色 3（可选） —— 如「留空则不使用」。
- 阴影模糊半径 —— 填数字，默认 20。
- 圆角半径 —— 填数字，默认 16。
什么时候会用到CSS 效果生成器
- 卡片要做渐变底 + 投影 + 圆角，一个个试参数看效果
- 设计稿给了个阴影效果，要还原成 box-shadow 的四个数值
- 想给图片加毛玻璃或灰度效果，不确定 filter 参数怎么写
值得先知道的一点
渐变、阴影、圆角、滤镜同时作用在同一个预览方块上——所见即最终样式；代码区只输出当前这一档的声明，不会倒出一堆用不上的属性。
常见问题
CSS 效果生成器收费吗？
完全免费，在浏览器本地运行，免登录、不限次数
我的文件安全吗？
本工具在你的浏览器本地完成全部处理，文件不会上传到服务器，数据不离开你的电脑。
需要安装软件吗？
不需要。打开网页即可使用，手机与电脑浏览器均可访问。
延伸阅读
相关轻设计工具