CSS 渐变生成器

什么是 CSS 渐变生成器？#

CSS 渐变就是两种或多种颜色之间的平滑过渡，由浏览器沿着一条直线、一条射线或绕着一个角度绘制出来。用得好，一行渐变就能替掉一张 200KB 的背景图——任意尺寸自适应、任何屏幕都清晰、CSS 里一行写完。难的不是写语法，而是在你反复调颜色、调角度、调色标的整个过程里，能不能立刻看到结果。

本页就是一个为此而生的实时工作台。拖动色标、滑动角度、在五种渐变类型之间切换，页面会直接吐出你样式表需要的那行 linear-gradient(...)（或者 radial-、conic-、以及它们的 repeating 变体），外加一段可以直接粘走的 Tailwind v4 @theme 片段——把每个颜色都变成一个可复用的令牌。

怎么使用#

1. 选 类型：
   • 线性 (linear) —— 颜色沿一条指定角度的直线过渡。默认选项，覆盖绝大多数场景。
   • 径向 (radial) —— 颜色从一个中心点向外辐射。适合做聚光、暗角。
   • 锥形 (conic) —— 颜色像饼图一样绕着中心点旋转。常用来做色环、加载动画的背景。
   • 重复线性 / 重复径向 (repeating) —— 把同一段渐变平铺，得到条纹或同心圆环。
2. 对线性、锥形类型，拖 角度 滑块（0–359°）。预览实时刷新；0° 朝上、90° 朝右、135° 就是经典的那种从左上到右下的对角线。
3. 对径向类型，选 形状——圆形 (circle) 或 椭圆 (ellipse)（全屏自适应背景默认就是椭圆）。
4. 管理 色标：
   • 每个色标有一个颜色块，以及在渐变条上的位置（0–100%）。
   • 拖动条上的手柄可以移动色标，也可以直接输入精确的百分比。
   • 点 + 添加色标 插入新的，点色标上的 × 删除。
   • 一段渐变至少要有两个色标。
5. 在底部读两个输出：CSS（原始的渐变值）和 Tailwind v4（一段 @theme 配置，把每个颜色注册成一个 --color-grad-* 令牌，再附一个引用这些令牌的 .bg-gradient 工具类）。各自旁边都有复制按钮。

主要特性#

• 一个工具涵盖五种渐变。 线性、径向、锥形，再加上两个重复变体——切换类型时颜色不用重填。
• 像素级实时预览。 右边那块大的就是你要发布的真实渐变，所见即所得。
• 色标拖拽条。 在条上直接拖动任一色标就能改位置，百分比随手柄实时更新。
• 双输出。 手写样式表用原始 CSS，工具类项目用 Tailwind v4 的 @theme 片段（每个色标变成一个 --color-grad-* 令牌，由 .bg-gradient 工具类引用）——两边永远同步。
• 角度读数。 滑块旁边显示精确度数，方便你在别处精确复现。
• 零上传。 颜色、色标、角度全程不出浏览器。

实例演示#

假设你想要一段从靛蓝过渡到青蓝、稍微斜一点的品牌渐变。选 线性、角度设 135°，两个色标：

• 色标 1：#4F46E5 在 0%（靛蓝）
• 色标 2：#0D9488 在 100%（青蓝）

CSS 输出是：

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

Tailwind v4 片段是：

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

Tailwind 输出并没有把颜色直接写死，而是把每个色标在 @theme 里注册成一个 --color-grad-* 设计令牌，再让 .bg-gradient 这个工具类通过 var(...) 引用它们。改一个变量，所有用到它的地方都会一起更新。想要中间再插一个柔和一点的第三色？点 + 添加色标，把 #7C3AED 放在 50%，片段会新增一个 --color-grad-2: #7C3AED 令牌，原来的青蓝顺延为 --color-grad-3——色标始终按位置重新编号，令牌命名和色标条绝不会对不上。

常见问题#

线性、径向、锥形到底有什么区别？#

线性沿一条由角度决定的直线过渡。径向从一个点向外过渡，形成圆形或椭圆形的颜色扩散。锥形则是绕着一个点过渡——可以想象一个旋转的色环，每个角度对应一种颜色。它们的 repeating 变体会把同一段过渡平铺，做出条纹或圆环。

为什么 Tailwind 输出要定义 --color-grad-* 变量，而不是把颜色直接写进去？#

Tailwind v4 把配置搬进了 CSS 里的 @theme 块，其中每一项都会变成一个可复用的设计令牌。把每个色标输出成 --color-grad-1、--color-grad-2…… 再让 .bg-gradient 用 var(...) 去引用，等于顺手给了你一套能在任何地方复用的调色板——边框、文字、阴影都能用，不只是这一处背景。改一个变量，所有引用它的地方一起更新。（Tailwind v3 没有 @theme，请直接把上面的 CSS 输出贴进样式表。）

能不能做出硬切的色块，而不是平滑过渡？#

能。让两个色标的位置相同——比如 #000 50% 和 #fff 50%。两者之间没有距离，过渡区域宽度为零，于是平滑过渡就变成了一条硬边。做条纹或色块背景不用图，就是这么搞的。

锥形渐变看起来比设计软件里转了一个角度，为什么？#

不同软件对锥形渐变起始角的度量方式不一样。CSS 的 from 角是从正上方（12 点方向）顺时针计算的。如果你的设计软件是从正右方（3 点方向）算、或者是逆时针，那就相应加减 90°（或者取相反数），直到预览对上为止。