渐变生成器 - 可视化 CSS 渐变编辑器
以可视化方式设计线性和径向渐变。添加颜色停止点，调整角度，实时预览并复制 CSS。 免费。
색상 중지점
프리셋
복사됨!
什么是渐变生成器？
渐变生成器是一个用于创建 CSS 渐变的视觉编辑器。无需手动编写渐变代码，只需选择颜色、设置位置和调整角度，该工具会实时生成 CSS。它支持线性渐变（具有角度控制）和径向渐变（具有中心点控制），可以轻松地为背景、按钮和 UI 元素创建平滑的颜色过渡。
如何创建 CSS 渐变
- 选择类型 — 选择线性或径向渐变
- 设置方向 — 调整角度（线性）或中心点（径向）
- 编辑颜色停止点 — 更改颜色并拖动位置滑块
- 添加更多停止点 — 单击“+ 添加停止点”以获得复杂的渐变（最多 8 个）
- 复制 CSS — 单击“复制”按钮以获取 CSS 代码
为什么要使用此渐变生成器？
- 可视化编辑器 — 在您调整时实时查看渐变更新
- 线性和径向 — 两种渐变类型都具有完全控制
- 多个停止点 — 最多添加 8 个颜色停止点以获得复杂的渐变
- 预设 — 8 个漂亮的预设渐变可供选择
- 一键式 CSS — 立即复制可用于生产的 CSS 代码
FreeToolbox 与其他渐变工具的比较
| 功能 | FreeToolbox | cssgradient.io | WebGradients |
|---|---|---|---|
| 实时预览 | 是 | 是 | 仅静态 |
| 颜色停止点 | 最多 8 个 | 无限制 | 2 个（固定） |
| 径向支持 | 是 | 是 | 否 |
| 预设 | 8 个 | 无 | 180 个 |
| 广告 | 极少 | 适中 | 极少 |
常见问题
线性渐变和径向渐变有什么区别？
线性渐变沿指定角度的直线过渡。径向渐变从中心点向外以圆形或椭圆形过渡。
我可以添加多少个颜色停止点？
最多 8 个颜色停止点。您至少需要 2 个停止点才能形成渐变。单击“+ 添加停止点”以添加更多。
我可以删除颜色停止点吗？
是的。单击任何停止点旁边的“×”按钮将其删除，前提是至少保留 2 个停止点。
如何使用预设？
单击底部的任何预设缩略图。它会加载预设颜色并将渐变类型设置为 135° 的线性渐变。然后，您可以进一步自定义它。
这会生成跨浏览器的 CSS 吗？
生成的 CSS 使用所有现代浏览器（Chrome、Firefox、Safari、Edge）支持的标准渐变语法。无需供应商前缀。