CSS 渐变生成器
设置色标和角度，渐变 CSS 代码立即生成。
输入的文字和文件不会发送到服务器，只在本浏览器中处理。
色标
点击色条空白处可添加色标，拖动手柄可调整位置。
CSS 代码
第一行 background-color 是给不支持渐变的环境准备的平均色。
使用方法
- 选择类型（线性、径向、锥形），再设置角度或中心位置。
- 点击色条空白处或“添加色标”增加色标，拖动手柄或在 % 输入框中填写数字来调整位置。
- 每个色标都可以用色块选色，也可以输入 #rrggbbaa 这样带透明度的代码。
- 复制“CSS 代码”粘贴到样式中即可。点“随机”还能浏览新的配色组合。
常见问题
linear、radial、conic 有什么区别？
linear 沿一个方向变化，radial 从中心向外呈圆形扩散，conic 则绕着中心按顺时针变化。conic 很适合做饼图或色环。
角度 0deg 是哪个方向？
在 linear-gradient 中，0deg 表示从下到上，90deg 表示从左到右。conic 的 0deg 从 12 点钟方向开始。
旧版浏览器能显示吗？
linear 和 radial 几乎所有浏览器都支持，conic 需要 2020 年以后的浏览器。无法绘制渐变时会显示一同写入的 background-color。