CSS 渐变生成器

选择线性或径向渐变,设置角度和颜色节点,实时预览和 CSS 属性即时生成。

浏览器本地处理 无需注册 开发者

编辑多个颜色 stop 和百分比位置,生成 CSS linear gradient 或圆形 radial gradient,并复制一个 background 声明。

如何生成 CSS 渐变

  1. 选择 Linear 或 Radial。
  2. 添加、删除并调整颜色 stop 与 0~100% 位置。
  3. Linear 模式可设置角度,然后复制生成的 background 声明。

输出规则

输出前会按 stop 的数值位置排序。

Linear 输出 linear-gradient,Radial 只输出 circle radial-gradient;不支持 conic、repeating、ellipse 或更复杂定位。

隐私与限制

所有编辑和预览都在浏览器本地完成。工具只生成普通 linear gradient 和 circle radial gradient。

CSS Gradient 常见问题

可以添加两个以上的颜色吗?

可以,使用 Add Stop。

stop 会自动排序吗?

会,按百分比位置排序。

Radial 会使用角度吗?

不会,Radial 模式隐藏角度控制。

支持 Conic gradient 吗?

不支持,只支持 Linear 和圆形 Radial。

支持 Repeating gradient 吗?

不支持,只生成非 repeating 渐变。