CSS 渐变生成器
以可视化方式构建令人惊艳的线性渐变和径向渐变。添加颜色节点，调整角度，从预设方案中选择，并立即复制 CSS 代码。
미리보기
그라디언트 유형
색상 중지점
프리셋
CSS 코드
복사됨!
什么是 CSS 渐变生成器？
CSS 渐变生成器可让你以可视化方式为 Web 背景创建平滑的颜色过渡。你无需手动编写渐变语法，只需选择颜色、调整节点位置和角度，即可立即获得可用于生产环境的 CSS 代码。它支持线性渐变（定向）和径向渐变（圆形）。
如何创建 CSS 渐变
- 选择类型 — 选择线性或径向模式
- 添加颜色 — 使用颜色选择器设置渐变节点
- 调整位置 — 拖动滑块以控制每种颜色的位置
- 设置角度 — 对于线性渐变，调整方向角度
- 复制 CSS — 点击复制按钮以获取 CSS 代码
为什么要使用此 CSS 渐变生成器？
- 可视化编辑器 — 在调整颜色时，实时查看渐变的更新
- 多个节点 — 最多可添加 8 个颜色节点以创建复杂的渐变
- 预设图库 — 从漂亮的预制渐变开始，并对其进行自定义
- 简洁的 CSS — 获取可直接复制粘贴且具有正确语法的 CSS
- 无需注册 — 免费且完全在你的浏览器中运行
FreeToolbox 与其他渐变生成器的比较
| 功能 | FreeToolbox | cssgradient.io | WebGradients |
|---|---|---|---|
| 线性 + 径向 | 是 | 是 | 仅线性 |
| 多个节点 | 最多 8 个 | 无限制 | 仅 2 个 |
| 预设 | 6 个 | 否 | 180 个 |
| 广告 | 极少 | 很多 | 中等 |
| 深色 UI | 是 | 否 | 否 |
常见问题
我可以创建径向渐变吗？
可以。在顶部切换线性模式和径向模式。径向模式会创建从中心向外辐射的圆形渐变。
我可以添加多少个颜色节点？
最多可以添加 8 个颜色节点。每个节点都有自己的颜色选择器和位置滑块。
它是否生成供应商前缀？
现代浏览器都支持标准语法。生成的代码使用标准的 `linear-gradient` / `radial-gradient` 语法，该语法可在所有当前浏览器中使用。
我可以保存我的渐变吗？
复制 CSS 代码并将其保存在你的项目中。该工具在浏览器中运行，不会将数据存储在服务器上。
这个工具是免费的吗？
是的，完全免费，无需注册或使用限制。