适用人群
- 制作卡片与横幅的设计师
- 学习 CSS 渐变的开发者
Developer Design Utility
CSS Gradient 生成器
通过调整颜色、方向、类型和颜色停止位置，生成 linear-gradient、radial-gradient、conic-gradient CSS background 代码，并实时预览效果。
Gradient 代码生成
快速生成 linear、radial、conic 渐变 CSS background 代码。
实时预览
修改颜色、角度和位置后会立即反映到预览背景中。
复制与下载
可复制选择器代码、CSS 变量和 background 属性，也可保存为 CSS 文件。
Gradient Type
Linear
Angle
135°
Color Stops
0% / 100%
Output
background
STEP 1
Gradient 设置
组合渐变类型、颜色、角度和目标选择器，创建所需的 CSS 背景代码。
选择 Linear、Radial 或 Conic 渐变。
0°
135°
360°
作为 Linear / Conic 渐变的方向和旋转基准。
起始颜色，可输入 HEX 颜色代码。
结束颜色。在需要对比度的 UI 中建议检查亮度差异。
0%
0%
100%
0%
100%
100%
选择生成结果中使用的 CSS 选择器。
仅在选择自定义时使用。
生成 CSS 变量代码时使用的变量名。
同时输出 :root 变量和选择器应用代码。
Live Preview
CSS Gradient
调整颜色和方向，实时查看背景预览效果。
Type
linear
Angle
135°
Colors
2
STEP 2
推荐预设
常用于按钮、卡片、Hero 背景和缩略图的渐变组合。
基础 UI 渐变
强调 / CTA 渐变
特殊类型渐变
STEP 3
待机中
生成结果
可将以下代码用于 CSS 文件或 style 属性。
请选择设置后点击生成 CSS 代码按钮。
创建双色 CSS 渐变并复用代码
使用两个色标预览线性、径向或圆锥渐变。调整方向与色标位置，复制 background-image 声明或下载 CSS 文件。
使用场景
- 制作斜向双色背景。
- 通过 CSS 自定义属性复用渐变。
从输入到检查结果
- 1
选择 linear、radial 或 conic。
- 2
输入两个 HEX 颜色及各自的百分比位置。
- 3
为 linear 或 conic 设置角度；radial 使用固定的居中圆形。
- 4
设置选择器，按需启用 CSS 变量，然后生成。
- 5
生成后有效的修改会更新代码；修正错误后再复制或下载。
蓝紫色斜向背景
- 输入
- linear · 135° #2563eb：0% · #7c3aed：100%
- 结果
- background-image: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
将声明应用到具有可见尺寸的元素上。
白色中心与黑色外围
- 输入
- radial #ffffff：0% · #000000：75%
- 结果
- background-image: radial-gradient(circle, #ffffff 0%, #000000 75%);
75% 色标以外继续保持第二种颜色。此径向输出不使用角度设置。
计算与处理原理
将两个颜色和位置组合成 gradient 函数，直接输出 background-image 或通过 :root 自定义属性引用。第一个色标不能晚于第二个；相同位置会形成清晰的颜色边界。
限制与注意事项
- 仅支持两个色标，没有重复渐变、透明度或插值色彩空间选项。
- 径向形状和中心固定，圆锥渐变也使用默认中心。
- 选择器只用于输出代码，不应用到本页其他元素。
- 不会自动检查渐变上每个位置的文字对比度。
数据处理
颜色、选择器与变量名在浏览器中处理。复制或下载的 CSS 包含这些设置。
参考资料
相关工具
常见问题
径向渐变为什么不随角度变化？
工具生成固定居中圆形的 radial-gradient(circle, ...)。角度只用于 linear 和 conic。
可以倒置色标位置吗？
第一个位置大于第二个时会要求修正。需要反转颜色过渡时，请交换两种颜色。
为什么错误提示不能导出？
只有有效的已生成 CSS 可以导出。请修正输入，或在载入示例后先点击生成。