工具箱 › 图片 › 渐变生成

CSS 渐变生成

在线生成 CSS 渐变，支持线性、径向与锥形三种类型，可增删色标、调整角度与自动补间，实时预览并一键复制 CSS 代码。

类型角度 90° 自动补间色

角度方向与 CSS 一致

线性渐变的 0° 指向**上方**，90° 指向**右**。这与很多设计工具相反（它们用数学极坐标），复制到 CSS 时不要再翻转。

径向与锥形渐变在 CSS 里的参数顺序是「起点 at 位置」，工具输出的顺序与规范一致。

勾选后会在相邻色标之间插入中间色，渐变过渡更平滑，不容易出现色带。

关闭则严格按你给的色标渲染，色标之间是浏览器自己的线性插值。

不能。CSS 渐变无法直接转 SVG。「占位图生成」可以导出 SVG 图形，但那不包含渐变定义。

预览用的就是标准 CSS 渐变。如果有差异，请确认没有把角度当成数学极坐标理解。