CSS 渐变生成器
用 OKLCH 或 OKLab 混色制作线性、径向和锥形 CSS 渐变，附带 sRGB 回退，可复制 CSS、Tailwind 类名或 SVG，或下载 PNG。
完全在您的浏览器中运行 - 您的渐变不会上传到任何地方。
色标
点击色条添加色标，拖动色标即可移动。选中色标后，可用方向键移动，按 Delete 键删除。
预设
混色空间
同一组色标，三种混色方式。经典的 sRGB 在相距较远的颜色之间可能发灰、发浑；OKLab 让亮度保持均匀，OKLCH 让颜色保持饱满。不支持 OKLab 或 OKLCH 的浏览器会使用看起来一样的 sRGB 回退。
叠加文字
- 白色文字
- 2.1:1
- 过低
- 黑色文字
- 4.2:1
- AA（仅限大号文字）
渐变上任意位置的最低对比度。WCAG AA 要求正文文字达到 4.5:1，大号文字达到 3:1。
代码
background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);所见即所得地调出 CSS 渐变，复制到处都能用的代码。选择线性、径向或锥形，拖动色标，再选择颜色的混合方式：现代浏览器可以在 OKLab 或 OKLCH 中混色，避开经典 sRGB 渐变中间那片灰暗地带，代码还附带与之匹配的 sRGB 回退，兼顾旧版浏览器。您还能看到白色或黑色文字叠在上面是否清晰可读，并可导出 Tailwind 类名、SVG 或任意尺寸的 PNG。
常见问题
sRGB、OKLab 和 OKLCH 渐变有什么区别？
它们是计算两个色标之间颜色的不同方法。经典 CSS 渐变在 sRGB 中混色，可能会陷入灰色（蓝到黄会经过一段暗淡的灰色），或在中间变暗。OKLab 的设计让相等的步长看起来也相等，因此混合后的亮度保持均匀。OKLCH 分别混合明度、彩度和色相，沿着色轮绕行并保持鲜艳 - 红到蓝会经过紫色，而不是暗沉的灰紫色。在渐变中写上“in oklab”或“in oklch”即可使用。
OKLCH 渐变在所有浏览器中都能用吗？
Chrome 和 Edge 111+、Safari 16.2+ 以及 Firefox 127+ 都支持“in oklch”和“in oklab”。为了兼容更旧的浏览器，代码中有两行“background”：第一行是普通的 sRGB 渐变，中间插入了额外的色标，因此看起来几乎一样；第二行是现代写法。浏览器会跳过它看不懂的那一行，所以每个人都能看到自己的浏览器所能绘制的最佳效果。
如何在 Tailwind CSS 中使用？
选择“Tailwind 类名”并复制：它是一个任意值类名，例如 bg-[linear-gradient(in_oklab_90deg,_#0077a3_0%,_#f59e0b_100%)]，按照 Tailwind 的要求把空格写成了下划线。直接粘贴到 class 中即可 - 无需任何配置。
为什么锥形渐变不能下载为 SVG？
SVG 只有线性和径向渐变，也无法像 CSS 那样重复径向渐变。这些情况请下载 PNG：它用同样的算法逐像素绘制，因此在您选择的任意尺寸下都与 CSS 效果完全一致。
分享链接是私密的吗？
渐变保存在链接中 # 号之后的部分，浏览器从不会把这部分发送给服务器，而且页面完全在您的浏览器中绘制。不会上传任何内容，渐变只保存在这台设备上，方便您下次回来时继续使用。