CSS 渐变生成器

这个 CSS 渐变生成器给你一块可视化的工作区，用来搭建线性、径向和圆锥渐变，然后一键交给你可直接上线的 CSS。不用再在样式表里猜十六进制色值、反复刷新浏览器——你可以实时调整颜色、角度和位置直到满意，再复制一段能直接粘进规则里的值。

渐变类型速览

类型	轴线	使用角度？	典型用途
线性 Linear	横跨元素的一条直线	是	首屏背景、按钮、边框
径向 Radial	从一个中心点向外辐射	否——使用圆形或椭圆	聚光灯、暗角、发光效果
圆锥 Conic	绕中心旋转扫描	是（起始接缝）	色轮、饼图与进度环

三者都是 CSS 函数——linear-gradient()、radial-gradient() 和 conic-gradient()——而不是图片文件。像素由浏览器计算，所以结果能缩放到任意元素尺寸而不模糊，也不消耗任何网络流量。

在这里构建一个渐变

1. 选择类型。 线性、径向或圆锥。切换类型会立即改变哪些控件有意义。
2. 设置几何参数。 线性和圆锥调整角度，径向选择圆形或椭圆。
3. 编辑色标。 每一行有一个颜色色块和 0 到 100 的位置。用「添加色标」按钮增加行。
4. 复制 CSS。 生成的声明显示在预览下方，复制按钮把它放进剪贴板。

预览面板即时反映每一次改动，所以你复制的代码正是你看到的渐变。新增色标默认为位于 50% 的粉色，每个色标的位置是自由数字而非固定槽位，因此你可以把两个色标放在 20% 和 25% 形成窄色带，或把多个堆在 100% 造出锐利的末端硬边。生成器在输出 CSS 前会按位置排序，这意味着即使你输入顺序是乱的，视觉顺序也总与数值顺序一致。

实操示例：三段色标按钮渐变

从两个色标开始，在中间添加一个：

• #3b82f6 位于 0%
• #8b5cf6 位于 50%
• #ec4899 位于 100%
• 类型：linear，角度：135deg

生成的值是：

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

135deg 的线性渐变从左上角指向右下角。由于中点是独立的紫色而非蓝与粉的混合，过渡保持干净。同样的三个色标改成 radial 类型会变成 radial-gradient(circle, …)，并完全忽略那个 135deg。

角度、形状与轴线

对线性渐变来说，0deg 指向上方，角度顺时针增加，所以 90deg 从左扫到右，180deg 从上到下。对圆锥渐变，同样的角度约定旋转起始接缝。对径向渐变，形状决定辐射是构成完美的圆，还是随元素拉伸成椭圆。色标位置是沿该轴线的百分比：在线性渐变里，0% 是轴线出发的那一端，100% 是远端。两个色标处于同一位置会形成硬边界，条纹和饼图切片就是这么做的。

角度值会回绕：输入 450 等价于 90，因为生成器会把数字归一化到 0–360 范围。负角度同样可用，只是朝另一方向回绕。预览区的尺寸随容器变化而非固定宽度，所以在面板里看起来正确的渐变应用到全宽首屏时会正确拉伸。因为面板和你目标元素接收的是同一条声明，粘贴后若有差异，原因来自布局环境——元素尺寸、圆角、覆盖内容——而不是渐变本身。

避免浑浊的中间色

渐变最常见的视觉抱怨——蓝到橙或红到绿过渡的中心出现灰雾——来自 sRGB 插值。浏览器独立混合每个通道，而互补色相会在色立方体的中部交叉。两种办法很有效：插入一个刻意的中间色标（蓝色和黄色之间放一个青色），或保持在相邻色相内、让明度承担变化。抖动不是这个工具会添加的功能，所以在大面积低对比渐变上仍可能在某些显示器看到色带；加一个微妙的第三色标通常就能打散色带。

渐变还会让文字对比度变复杂。一个渐变可能在两端都通过对比度检查，却在中间跌破阈值，所以如果你要在上面放标题，请用肉眼观察中点，或分别检查最亮和最暗的区域，而不是只测两端。把一端压暗，或在文字后面加一层半透明遮罩，通常比重新设计整个渐变更简单。

局限性

生成器使用当前浏览器支持的标准语法输出单条 background 声明。它不写厂商前缀，所以非常古老的浏览器无法理解结果。它也不实现 repeating-linear-gradient、颜色插值提示，或较新的 in oklab 插值方式——输出是纯 sRGB。预览使用的就是你要复制的 CSS，所以面板里看到的即现代浏览器会绘制的。

颜色输入仅限于色块选择器，它基于十六进制工作，输出值就是选择器报告的内容。如果你的设计系统期望别的颜色格式，比如 hsl() 或 RGB 三元组，你需要在复制后自行转换。这里没有保存历史，也不能导出 .css 文件；工作流刻意保持为一次一个渐变。

相关工具

• 颜色选择器
• CSS 格式化
• 配色方案生成器