🌈CSS 渐变生成器

怎么用 CSS 渐变生成器

1. 先选线性、径向或锥形，然后拖动色条上的滑块调整每个节点的位置，点色块可以改颜色。
2. 线性渐变用转盘设角度，径向和锥形设置中心点与大小；勾选“重复渐变”可以做条纹效果。
3. 复制 background 规则、Tailwind 任意值写法，或者直接下载 SVG 文件。

常见问题

怎么增加或删除颜色节点？

点“添加节点”会在色条中间插入一个，每一行右侧的删除按钮可以移除。最少保留两个节点，上限不限，每个节点的位置都用百分比单独保存。

Tailwind 类名需要改配置吗？

不需要。生成的是 Tailwind 的任意值语法，bg-[linear-gradient(...)] 可以直接用，不必修改 tailwind.config.js。其中空格写成下划线，Tailwind 会自动还原。

锥形渐变导出的 SVG 为什么不一样？

SVG 只有线性和径向渐变，没有锥形。导出时会用一圈扇形色块近似，视觉上几乎一致，但由很多路径组成，而不是一个渐变定义。