CSS渐变生成器

用最多八个色标创建线性、径向或锥形渐变，复制带sRGB回退写法的CSS，并导出PNG或SVG。

如何复制CSS

1
选择颜色和色标位置
从两个色标开始，最多可以加到八个。每个色标都可以直接输入颜色值和百分比位置，用精确的数字代替用鼠标一点点拖动手柄。
2
选择线性、径向或锥形
线性或锥形渐变设置角度，径向渐变设置形状和中心，再决定整个渐变是否重复。预览会立即更新。
3
复制CSS或下载PNG
CSS分为两条声明：一条sRGB回退写法，以及覆盖在它之上的现代插值写法。同一个渐变也可以导出为PNG，尺寸最大4096像素，或者导出为SVG。

为什么在OKLCH中插值

在普通sRGB中从蓝色渐变到黄色，中间会经过一段暗淡的灰色。这不是浏览器的bug：把红、绿、蓝三个通道逐一取平均，恰好在人眼期待看到鲜亮绿色的地方把色度抵消掉了。OKLCH是感知均匀的色彩空间，同样两个端点得到的中间色依然饱和，亮度也均匀上升。现代CSS允许指定在哪个空间里插值，例如`linear-gradient(90deg in oklch, ...)`，本生成器默认使用它；想要旧的效果时，也可以选择oklab、sRGB和HSL。

为什么回退写法比看上去更重要

不认识`in oklch`的浏览器不会只忽略这一个词，而是丢掉整条声明。没有回退写法，结果不是略有不同的渐变，而是根本没有渐变，下面的背景色会直接露出来。所以复制出来的CSS总是包含两行`background-image`。第一行是回退写法：在这里按你选择的色彩空间算出十六个中间色标，再写成普通的sRGB十六进制颜色，它和同一条曲线足够接近，多数人分辨不出两者的差别。第二行是现代的单行写法，支持它的浏览器会用它覆盖第一行。

重复渐变和锥形渐变的特殊情况

重复渐变会把色标序列一遍遍平铺，前提是最后一个色标低于100%。否则就没有剩下的部分可以重复，结果和普通版本一模一样。这种情况在你复制之前就会检测出来。锥形渐变在导出时有自己的限制：SVG 1.1根本没有锥形渐变元素，所以SVG按钮会说明这一点，并引导你使用PNG；为了兼容旧版Safari，PNG用720个半度的扇形绘制。

一切都在这个标签页里计算

颜色插值、CSS文本、SVG代码和PNG都在本地用JavaScript和canvas生成。渐变的任何信息都不会上传，也不会把图片发送到任何地方去渲染。关闭标签页后，什么都不会留下。

常见问题

为什么要在OKLCH中给渐变插值？

因为在色相相距较远时，sRGB插值会让渐变中段的饱和度下降，出现一条灰带。OKLCH在感知上是均匀的，中间色能保住色度，亮度的过渡也显得均匀。

为什么需要回退那一行？

不支持`in <space>`语法的浏览器会丢弃整条声明，而不只是不认识的那部分。回退写法是先写的一条普通sRGB近似值，这样这些浏览器仍然能显示渐变。

怎么做重复渐变？

打开重复选项，把最后一个色标移到100%以下，例如20%。色标序列就会在元素上平铺。最后一个色标在100%时没有可重复的部分，工具会直接告诉你，而不是悄悄给出一模一样的结果。

为什么锥形渐变没有SVG？

SVG 1.1只定义了线性和径向渐变，没有锥形元素。用几百个扇形去模拟，得到的文件没人能编辑，所以锥形渐变不提供SVG导出，改为提供PNG。

能做渐变到透明的效果吗？

能。给要淡出的色标使用带透明度的颜色写法，例如八位十六进制或rgba()。CSS和PNG都会保留透明度。

背景图应该下载多大尺寸？

全屏背景通常宽1920像素就足够了，而且渐变图片的压缩效果非常好。超过2048只在印刷时才值得。如果用在网页上，优先用CSS：它只有几百字节，可以缩放到任何尺寸。

Safari支持这些渐变吗？

Safari 16.4及以后的版本支持插值空间。更早的版本会退回到sRGB那一行，这正是加上它的原因。CSS锥形渐变从Safari 12.1开始支持，PNG导出把它画成扇形，所以更早的版本也能正确显示。