CSS 渐变生成工具 — 在浏览器中构建渐变
可视化地设计渐变，一键复制 CSS。
本工具完全在你的浏览器中运行。你的文件绝不上传——它们始终保留在你的设备上。
90°
Color stops
- 0%
- 100%
结果
background: linear-gradient(90deg, #6d28d9 0%, #ec4899 100%);手写渐变语法很繁琐 — 一个百分比写错或漏掉一个单位，整个背景就会失效。这款生成器让你以可视化方式构建渐变：随心添加任意数量的色标、拖动它们的位置、在线性与径向之间切换，并实时看到预览更新。
一切都在你的浏览器中运行。无需注册、无需往返服务器，也无需安装任何东西 — CSS 会在你更改设置的那一刻就在你的设备上生成，直接复制粘贴到样式表即可。
如何使用 CSS 渐变生成工具
- 选择一种渐变类型 — 线性或径向。
- 对于线性渐变，请以度为单位设置角度。
- 使用拾色器及其位置滑块调整每个色标。
- 添加或移除色标，直到预览看起来满意为止。
- 点击“复制 CSS”，复制生成的 background 规则。
常见问题
这会生成什么样的 CSS？
它会输出一条 background 属性，使用标准的 linear-gradient() 或 radial-gradient() 函数，因此你可以直接粘贴到任何样式表或内联样式中。
我可以添加多少个色标？
想加多少就加多少。每个色标都有自己的颜色和位置，渐变会随你添加、编辑或移除色标而实时更新。
角度对径向渐变有作用吗？
没有。角度只影响线性渐变。径向渐变从中心向外扩散，因此选择径向时角度控件会被隐藏。
有任何内容会发送到服务器吗？
不会。工具完全在你的浏览器中运行。你的颜色和生成的 CSS 绝不会离开你的设备。