工具简介
按钮、卡片、背景想用渐变效果，手写 CSS 语法既难记又难调。可视化地选几个颜色，实时预览，代码自动生成。
本工具支持线性与径向渐变，可调整角度、色标位置，生成的 CSS 代码直接复制即可用。
主要功能
- 可视化调整渐变颜色与色标位置
- 支持线性渐变与径向渐变
- 可设置渐变角度，实时预览效果
- 自动生成标准 CSS 代码，一键复制
适用场景
- 为按钮和卡片设计渐变背景
- 快速试验多套配色方案
- 给页面头部制作渐变视觉区域
常见问题
生成的 CSS 兼容性如何？
生成的是标准 linear-gradient 与 radial-gradient 语法，现代浏览器均支持。若需兼容非常老旧的浏览器，可额外准备纯色兜底。
可以添加多个颜色吗？
可以。增加色标后即可实现多段渐变，拖动色标位置还能控制各颜色占比。
角度是怎么算的？
线性渐变角度以向上为 0 度，顺时针递增。例如 90 度表示从左到右，180 度表示从上到下。
相关工具
隐私说明
CSS 渐变生成 在你的浏览器本地完成全部计算，你选择的文件与输入的内容都不会被上传到任何服务器，处理结束后即被释放。详细的数据处理方式请查看我们的隐私政策。