CSS 渐变生成器
可视化配置线性/径向渐变的角度与多个颜色色标，实时预览渐变效果并一键复制 CSS background 代码。
免费在线工具
Loading…
使用说明
按以下步骤生成渐变 CSS：
- 选择类型：linear-gradient（线性渐变）或 radial-gradient（径向渐变，固定为 circle 圆形扩散）。
- 设置角度：仅线性渐变可用，通过滑块调整 0°~360° 的渐变方向。
- 编辑色标：默认提供黑色（0%）到紫色（100%）两个色标，可通过颜色选择器修改颜色、滑块调整该色标所在的百分比位置。点击「+ 添加色标」可增加更多颜色，超过 2 个色标时每个色标旁会出现「×」按钮用于删除（保留至少 2 个色标）。
预览区会实时展示渐变效果，底部代码框同步生成 background: ...; 代码，点击「复制 CSS」即可复制。
功能介绍
本工具支持在线性渐变和径向渐变之间自由切换，并支持任意数量（≥2 个）的多色标混合渐变，满足从简单双色渐变到复杂多色渐变的各类需求。
- 线性渐变支持 0°~360° 任意角度调节，径向渐变以圆形（circle）方式从中心向外扩散。
- 色标数量不限，每个色标可独立设置颜色（十六进制颜色选择器）和位置百分比（0%~100%）。
- 新增色标时会随机生成一个颜色，方便快速尝试多色效果。
- 预览区与代码框实时联动，所有修改立即可见。
使用场景
按钮卡片配色
为按钮、卡片背景快速调配好看的渐变色并导出 CSS
Hero 区域背景
制作页面 Hero 区域的多色渐变背景
角度方向试验
尝试不同角度的线性渐变效果，寻找最合适的视觉方向
光晕效果设计
设计径向渐变的聚光灯/光晕背景效果
常见问题
径向渐变可以调整角度吗？
不可以。当前径向渐变固定为从中心向外的 circle（圆形）扩散方式，仅线性渐变支持角度调节，切换到径向渐变时角度控件会自动隐藏。
最多可以添加多少个颜色色标？
工具没有设置数量上限，可以根据需要持续点击「+ 添加色标」增加，但色标越多渐变过渡会越复杂，建议根据实际视觉效果控制在 2~5 个之间。
能否删除到只剩一个色标？
不能。为保证渐变始终有效，工具限制最少保留 2 个色标，当色标数量为 2 时不会显示删除按钮。
生成的渐变代码兼容旧版浏览器吗？
生成的是标准 CSS3 linear-gradient/radial-gradient 语法，现代浏览器均原生支持，无需额外加浏览器前缀。