CSS 渐变生成器

可视化设计线性或径向 CSS 渐变：选择类型，调整角度或形状，添加任意数量的颜色停靠点，实时预览。结果可复制为普通 CSS 规则或 Tailwind 任意值类。

—

类型

角度

°

颜色停靠点

0%
100%

预览

CSS

background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

Tailwind

bg-[linear-gradient(135deg,_#3b82f6_0%,_#8b5cf6_100%)]

使用方法

选择线性或径向。
调整角度（线性）或形状（径向）。
编辑颜色停靠点，拖动位置滑块。
复制 CSS 规则或 Tailwind 类。

常见问题

为什么用 Tailwind 任意值？: bg-[…] 任意值类让你不写额外 CSS 即可在 Tailwind 项目中应用自定义渐变。
可以添加多少颜色停靠点？: 任意数量——通常 3 到 5 个最好看，但没有上限。
渐变会保存吗？: 上次的设计会自动保存到浏览器本地存储，下次打开自动恢复。
Tailwind 类里为何有下划线？: Tailwind 把空白视为类分隔符，所以任意值用下划线代替空格。

相关工具

Conic Gradient 生成器

CSS `conic-gradient()` 的可视化构建器 — 旋转角度、中心位置、颜色停止、形状预览。适用于饼图、环形图、棋盘格图案、色轮。

颜色令牌导出器

定义一次颜色调色板，导出到 CSS 自定义属性、Tailwind 配置、SCSS、LESS、设计令牌 JSON、SwiftUI Color 或 Android `colors.xml`。实时预览色样。

颜色名称查找

为任意 hex/RGB 颜色查找最接近的 CSS、Tailwind 或 XKCD 调查色名 — 按 OKLab 空间感知距离排序。

CSS 混合模式模拟器

把 W3C 合成规范的 16 种 mix-blend-mode(multiply·screen·overlay·soft-light·hue·color·luminosity 等)应用到两种颜色上,一览查看每种模式的混合结果与可复制的 CSS 片段。

颜色混合器

在 RGB、HSL 或 CIELAB 空间中插值两种颜色。查看中间过渡的 11 步渐变条。

颜色插值 / 渐变步进

选择两个 hex 颜色，获取 N 个离散中间步进 —— 在 sRGB、linear RGB、OKLab 或 HSL 中 —— 带可选缓动。