CSS 渐变生成器

以可视化方式设计背景渐变，并复制可直接使用的 CSS。沿渐变条拖动色标，点击渐变条添加色标，调整角度或中心点，还可以让颜色透明。代码中包含供旧版浏览器使用的纯色备用色。

类型形状

重复

角度°

中心 X%

中心 Y%

色标拖动色标可移动它；点击渐变条可添加色标。

颜色

不透明度%

位置%

预设

CSS

线性、径向和锥形渐变有什么区别？
线性渐变沿着按所选角度的直线改变颜色。径向渐变从中心向外呈圆形或椭圆形扩散。锥形渐变像时钟指针一样围绕中心旋转，适合制作色轮和饼图。

CSS 渐变在所有浏览器中都能用吗？
可以。线性、径向和锥形渐变在 Chrome、Edge、Firefox 和 Safari 的所有当前版本中都无需前缀即可使用。background 的第一行是纯色，仅供非常旧的浏览器使用。

如何制作条纹？
在每条条纹的起点和终点各放一个相同颜色的色标，让颜色突然切换而不是渐变过渡，然后开启“重复”。最后一个预设就是示例。