CSS 渐变生成器
可视化生成 CSS 渐变，支持线性、径向、锥形三种类型，调整角度、位置和最多 6 个颜色节点，实时预览。免费在线 CSS 渐变生成器。
使用方法
- 使用顶部标签选择渐变类型——线性、径向或锥形。
- 线性：拖动角度滑块或输入 0 到 360 度的值。使用方向快捷按钮（上 / 右 / 下 / 左）快速设置。
- 径向：从下拉菜单中选择形状（圆形或椭圆）和中心位置。
- 锥形：用滑块设置起始角度，并选择中心位置。
- 在颜色节点部分，点击色块或输入十六进制值来更改每个节点的颜色。调整百分比控制其在渐变中的位置。
- 点击 + 添加 插入更多节点（最多六个），或点击 × 删除（最少保留两个）。
- 预览矩形实时随修改更新。
- 点击复制将 CSS 规则复制到剪贴板。
理解生成的 CSS
输出为 .gradient 类设置 background 属性。对于线性渐变，角度控制方向——0deg 从上到下，90deg 从左到右。
对于径向渐变，语法在颜色列表前指定形状和位置。对于锥形渐变，from 设置起始角度，at 设置旋转中心。
常见用途
CSS 渐变广泛用于 Hero 区域背景、卡片头部、按钮填充、进度条、装饰性遮罩层以及文字填充效果（通过 background-clip: text）。
锥形渐变特别适合用纯 CSS 实现饼图和色轮选择器。
FAQ
线性、径向和锥形渐变有什么区别？
线性渐变沿由角度定义的直线过渡颜色。径向渐变从中心点向外以圆形或椭圆形辐射。锥形渐变像色轮一样围绕中心点旋转颜色，从指定角度开始。
如何使用生成的 CSS 渐变？
复制生成的 CSS 并粘贴到你的样式表中。输出内容为 .gradient 类设置 background 属性。将类名改为你的元素名称，然后将其应用在需要渐变的地方——div、按钮或任何块级元素。
可以添加超过两个颜色节点吗？
可以。点击「添加」按钮可插入更多颜色节点，最多六个。每个节点有独立的颜色选择器、十六进制输入框和位置百分比。调整百分比值可控制每种颜色在渐变中的起止位置。
颜色节点的位置百分比是什么意思？
百分比定义了该颜色在渐变中完全显示的位置。0% 在最起始处，100% 在最末端。中间的节点控制混合过渡。将两个相邻节点设为相同百分比可创建无过渡的硬性颜色边界。
为什么 CSS 渐变比渐变图片更好？
CSS 渐变与分辨率无关，在任何显示密度下都能完美缩放，不增加 HTTP 请求，可通过 CSS 进行动画和过渡。修改也只需改几个值，而修改图片每次都需要外部工具重新生成。