使用方法
- 选择“渐变类型”：颜色沿直线变化（线性）、从中心向外扩散（径向），或绕一点旋转（锥形）。
- 为线性或锥形渐变设置“角度”。它不适用于径向渐变。
- 在“色标”中选择每个颜色，并以百分比给出它的位置。可添加或删除色标，数量从两个到六个。
- 点击“CSS”下方的复制按钮，把该行粘贴到您的样式表中，或从某个预设开始。
三种渐变类型
- 线性：颜色沿一条直线变化。0deg 指向上方，角度按顺时针旋转，因此90deg 从左到右，180deg 从上到下。
- 径向：颜色以圆形从中心向外扩散，从第一个色标到最后一个色标。
- 锥形：颜色绕中心旋转，像钟表的指针。角度决定第一个颜色从何处开始。
色标及其位置
色标是沿渐变方向、位于0% 至100% 某处的一种颜色。编辑器按位置顺序写出色标，因此您输入的先后顺序不影响画面。二至六个色标既便于阅读，也使 CSS 保持简短。
代码是当前浏览器所读取的标准 CSS 语法，预览则由您的浏览器根据同一个值绘制，因此所见即样式表所得。
计算示例：“日出”预设
“日出”预设是角度为135deg 的线性渐变，从左上指向右下。它有三个色标：0% 处为橙色，50% 处为黄色，100% 处为粉色。
它生成的 CSS 为：background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #ec4899 100%);
常见问题
线性渐变中的 0deg 是什么意思？
0deg 指向上方，因此该角度下颜色由下向上变化。角度按顺时针旋转：90deg 从左到右，180deg 从上到下。
为什么代码中的色标顺序与我输入的不同？
代码按位置顺序写出色标，因为 CSS 按该顺序读取。若您先输入80% 再输入20%，代码会先显示20%，画面保持不变。
可以使用透明颜色吗？
本编辑器接受以十六进制书写的实心颜色。若需要透明度，请手动编辑代码，并使用带 alpha 值的颜色。
可以使用多少个色标？
两个到六个。编辑器会把数量保持在该范围内，因此渐变总有起点和终点，既便于阅读，也使 CSS 保持简短。
这段代码在所有浏览器中都能用吗？
语法是当前主流浏览器支持的标准写法。请在访客使用的浏览器中检查结果，尤其是需要支持较旧版本时。
我的设计会被发送到别处吗？
不会。渐变在您的浏览器中生成，既不会保存，也不会发送到我们或其他服务器，无需注册即可使用本页。
可以把渐变用作文字的颜色吗？
本工具只写出背景声明。把渐变放在文字后面是可行的，但它需要比本工具所写出的更多 CSS。
资料来源
- MDN：linear-gradient()，角度与色标语法（英文）
- MDN：radial-gradient()，终止形状与位置（英文）
- MDN：conic-gradient()，起始角度与色标位置（英文）
数据和文字最近核对于2026年11月10日星期二。