这个工具是什么
CSS Gradient Generator 用 CSS 渐变绘制背景，支持线性与径向两种类型。每个颜色节点都有独立颜色和百分比位置，可增加或删除节点，观察过渡如何变化。
如何使用
- 选择 Linear 或 Radial 渐变。
- 设置 2～6 个颜色节点与 0～100% 的位置。
- 线性渐变可调 0～360° 角度，滑块与数值输入保持同步。
- 查看实时预览并复制 CSS；使用“重置”或“载入示例”比较配色。
使用示例
- 0% 红色与 100% 蓝色可形成最简单的双色渐变。
- 加入位于 50% 的第三个颜色，可改变中间过渡。
- 同位置的颜色节点可用于制作明确的颜色分界。
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
background: radial-gradient(circle, #ffffff 0%, #000000 100%);原理与 CSS 说明
linear-gradient() 沿指定方向在颜色节点之间插值；radial-gradient() 从中心向外过渡。颜色先按不透明 HEX 规则验证，位置按百分比限制，再生成合法的 background 声明。
常见用途
- 制作网页背景与按钮配色。
- 快速比较多色渐变方向。
- 学习颜色节点位置对过渡的影响。
隐私说明
所有输入、计算、CSS 生成和预览都在当前浏览器中完成，不会上传用户内容，不使用后台、数据库、在线 API 或第三方 CDN，也不会自动保存您的输入。
FAQ
linear-gradient 和 radial-gradient 有什么区别？
线性渐变沿直线方向过渡；径向渐变从中心向外过渡，常见形状是圆形或椭圆。
CSS Gradient 是图片吗？
它是浏览器生成的 CSS 图像，不需要下载图片文件，也不需要在线生成服务。
如何调整线性渐变方向？
修改角度即可，0deg 指向上方，90deg 指向右方，180deg 指向下方。
可以使用三个以上颜色吗？
可以。本页允许 2～6 个颜色节点，每个节点都有独立颜色和位置。