渐变生成器

使用多个颜色停止点生成精美的CSS渐变。支持线性、径向和锥形渐变。自定义角度、颜色并导出CSS代码。

0%
100%
CSS
background: linear-gradient(90deg, #667EEA 0%, #764BA2 100%);
使用最多8个颜色停止点创建精美的CSS渐变。所有渐变在本地生成，CSS与所有现代浏览器兼容。

使用方法

  1. 1

    选择渐变类型

    选择线性（直线）、径向（从中心圆形扩散）或锥形（围绕点扫描）渐变样式。

  2. 2

    调整颜色和位置

    点击颜色选择器更改每种颜色。使用滑块调整每种颜色出现的位置（0-100%）。

  3. 3

    设置角度或方向

    对于线性和锥形渐变，使用角度滑块（0-360°）或快速预设按钮设置渐变方向。

  4. 4

    复制CSS代码

    点击「复制CSS」复制完整的background属性。直接粘贴到样式表中。

常见问题

可以添加多少种颜色？
最多可以添加8个颜色停止点。每个停止点可以放置在渐变沿线0%到100%的任何位置。
线性、径向和锥形渐变有什么区别？
线性渐变沿任意角度的直线流动。径向渐变从中心点向外圆形扩散。锥形渐变像色轮一样围绕中心点扫描。
生成的CSS跨浏览器兼容吗？
是的。现代CSS渐变在所有当前浏览器（Chrome、Firefox、Safari、Edge）中都受支持。2015年后发布的浏览器不需要供应商前缀。
可以使用透明颜色吗？
颜色选择器支持HEX颜色。如需透明度，可以在复制后手动编辑CSS使用rgba()或hsla()值。