使用步骤
- 从预设或默认渐变开始。
- 点击色条添加颜色，拖动色标调整位置。
- 选择线性、径向或锥形，调整角度或中心点。
- 复制 CSS 声明或 Tailwind 类名。
参数说明
- 线性
- 颜色沿直线变化。0° 向上，90° 向右，180° 向下。
- 径向
- 颜色从中心点以圆形或贴合元素的椭圆向外扩散。
- 锥形
- 颜色围绕中心点旋转变化，像色轮或饼图。
- 重复
- 重复渐变图案；把色标放在很小的范围内（如 0% 到 10%）就能做出条纹。
生成的代码长什么样
同样的两种颜色，用每种类型写出来是这样的。色标的位置始终用百分比表示：
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)Tailwind 版本是把同样的值放进任意值类名里，空格换成下划线，逗号后面的空格去掉：
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]最后一行 CSS 中，图案每隔元素的 10% 重复一次，形成细条纹。锥形渐变的角度是扫描的起始位置，径向渐变的两个百分比是中心位置。
常见问题
哪些浏览器支持？
线性、径向和锥形渐变在 Chrome、Edge、Firefox、Safari 的当前版本中都支持，不需要浏览器前缀。
怎么做透明渐变？
在色标的颜色框里输入带透明度的颜色，例如 #00000000 表示完全透明的黑色。
Tailwind 类名怎么用？
直接加到元素的 class 中即可（Tailwind CSS 3 或 4），使用的是任意值写法，不需要额外配置。
隐私说明
本工具完全在浏览器中运行，文件和文本都在你的设备上处理，不会上传到我们的服务器。