功能概述
按钮、卡片、背景想用渐变效果，手写 CSS 语法既难记又难调。可视化地选几个颜色，实时预览，代码自动生成。
本工具支持线性与径向渐变，可调整角度、色标位置，生成的 CSS 代码直接复制即可用。
参数说明
| 参数 | 默认值与范围 | 使用建议 |
|---|---|---|
| 类型 | 线性渐变 / 径向渐变 | 线性适合背景条带，径向适合做光斑或聚光 |
| 角度 | 默认 135°，可调 0–360 | 0° 由下往上，90° 由左往右 |
| 输出 | 标准 <code>linear-gradient</code> / <code>radial-gradient</code> 语法 | 一键复制到 CSS 里直接用 |
能力清单
- 可视化调整渐变颜色与色标位置
- 支持线性渐变与径向渐变
- 可设置渐变角度，实时预览效果
- 自动生成标准 CSS 代码，一键复制
渐变想好看，记住这两条
<strong>别拉太长</strong>：色相跨度太大的渐变（比如红到绿）中间会经过一段发灰的过渡区，看着脏。两个颜色在色环上靠近一些更稳。
<strong>深色底上用低饱和</strong>：背景渐变饱和度太高会压掉上面的文字。作为页面背景时，把两个色的亮度差值控制小一些，正文才读得清。
渐变的现代写法不需要前缀，主流浏览器都原生支持。
适用场景
- 为按钮和卡片设计渐变背景
- 快速试验多套配色方案
- 给页面头部制作渐变视觉区域
疑问解答
生成的 CSS 兼容性如何？
生成的是标准 linear-gradient 与 radial-gradient 语法，现代浏览器均支持。若需兼容非常老旧的浏览器，可额外准备纯色兜底。
可以添加多个颜色吗？
可以。增加色标后即可实现多段渐变，拖动色标位置还能控制各颜色占比。
角度是怎么算的？
线性渐变角度以向上为 0 度，顺时针递增。例如 90 度表示从左到右，180 度表示从上到下。
同类工具
隐私说明
CSS 渐变生成 在你的浏览器本地完成全部计算，你选择的文件与输入的内容都不会被上传到任何服务器，处理结束后即被释放。详细的数据处理方式请查看我们的隐私政策。