GradientX - 支持 OKLCH 的 CSS 与 Tailwind 渐变生成器

始终鲜亮的渐变,复制即可用的代码

GradientX 把精选渐变画廊和精确的编辑器结合在一起。使用 OKLCH 插值让渐变中段保持鲜亮而不是发灰,在真实界面上预览,并复制 CSS 或精确的 Tailwind v4 类名。所有操作都在浏览器本地完成。

使用方式

  1. 01

    选一个起点

    按风格浏览 300 多个渐变,或按名称、色值搜索。画廊会按当前的方向和色彩空间实时显示。

  2. 02

    细调

    在线性与径向之间切换,设置角度,增加、移动或修改最多五个色标。

  3. 03

    复制代码

    获取带 sRGB 兜底的 CSS,或带对应色彩空间修饰符的 Tailwind v4 类名。

导出格式

CSS
背景声明以及渐变文字类。OKLCH 输出会先写一行 sRGB 版本,兼容旧浏览器。
Tailwind CSS v4
bg-linear 与 bg-radial,配合 from、via、to 色标,以及 /oklch 等色彩空间修饰符。超过三个色标时使用任意值写法。

常见问题

为什么要用 OKLCH 插值?

sRGB 按通道混合颜色,蓝色到黄色之间会经过灰色。OKLCH 按亮度、彩度和色相插值,中段依然饱和、亮度均匀。

为什么 Tailwind 类名里带有 /srgb 或 /oklch?

Tailwind v4 默认在 OKLab 中混合渐变。明确写出色彩空间,网站上的效果才会和这里的预览完全一致。

浏览器支持 OKLCH 渐变吗?

支持。Chrome、Edge、Safari、Firefox 的当前版本都已支持,导出的 CSS 还会额外提供一行 sRGB 兜底。

更多工具