CSS Gradient Generator

关于本工具

CSS渐变生成器可创建可直接粘贴到CSS中的平滑多色渐变。支持线性（方向性）和径向（圆形）渐变，可添加任意数量的颜色节点。

颜色节点定义了渐变轴上每种颜色的起止位置。角度滑块可将线性渐变方向从0°旋转到360°。

使用方法

1. 选择线性或径向渐变类型。
2. 对于线性渐变，拖动角度滑块设置方向。
3. 点击色块更改颜色，拖动位置滑块调整节点位置。
4. 点击+添加节点按钮添加更多颜色节点，点击✕删除节点。
5. 点击复制将CSS background声明复制到剪贴板。

使用场景

Web设计师用CSS渐变代替图片创建英雄区背景，文件更小且分辨率无限。品牌团队生成符合企业配色指南的渐变调色板。开发者为卡片、按钮和叠加层原型化渐变填充。

常见问题

• 线性渐变和径向渐变有什么区别？ — 线性渐变沿给定角度的直线过渡颜色。径向渐变从中心点向外辐射颜色。
• 可以使用两种以上的颜色吗？ — 可以。点击+添加节点按钮添加任意数量的颜色节点，每个节点有独立的颜色和位置。
• 生成的CSS跨浏览器兼容吗？ — 是的。标准的linear-gradient()和radial-gradient()函数无需厂商前缀，在所有现代浏览器中完全支持。