CSS 渐变生成器
可视化制作线性、径向、锥形 CSS 渐变，一键复制 CSS、Tailwind 类名或导出 SVG。
免费浏览器本地运行无需注册
预览
渐变类型
颜色节点
预设渐变
CSS 代码
Tailwind 任意值写法
SVG 代码
SVG 没有原生锥形渐变，锥形会用扇形分段近似生成。
相关工具
怎么用 CSS 渐变生成器
- 先选线性、径向或锥形，然后拖动色条上的滑块调整每个节点的位置，点色块可以改颜色。
- 线性渐变用转盘设角度，径向和锥形设置中心点与大小；勾选“重复渐变”可以做条纹效果。
- 复制
background规则、Tailwind 任意值写法，或者直接下载 SVG 文件。
常见问题
怎么增加或删除颜色节点？
点“添加节点”会在色条中间插入一个，每一行右侧的删除按钮可以移除。最少保留两个节点，上限不限，每个节点的位置都用百分比单独保存。
Tailwind 类名需要改配置吗？
不需要。生成的是 Tailwind 的任意值语法，bg-[linear-gradient(...)] 可以直接用，不必修改 tailwind.config.js。其中空格写成下划线，Tailwind 会自动还原。
锥形渐变导出的 SVG 为什么不一样？
SVG 只有线性和径向渐变，没有锥形。导出时会用一圈扇形色块近似，视觉上几乎一致，但由很多路径组成，而不是一个渐变定义。