要点
- 01支持所有三种 CSS 渐变类型 — 线性、径向和锥形 — 并实时预览。
- 02添加最多六个颜色停止点，每个都有独立的位置和颜色。
- 03输出是完整的背景声明，可直接粘贴到任何样式表。
- 04无需注册、无需安装、无上传 — 一切都在浏览器中运行。
为什么使用可视化渐变生成器?
手工编写 CSS 渐变很快就会变得乏味。一旦你知道语法，它是可读的，但在没有可视预览的情况下选择精确的停止点位置和颜色会把一个简单的设计决策变成 DevTools 中的反复试验。生成器让你实时看到结果，并在看起来对的那一刻导出干净的代码。
此工具支持所有三种现代渐变类型。线性是经典的方向性混合，你会用于英雄背景和按钮。径向从一个点向外扩展 — 非常适合聚光灯效果和晕影。锥形围绕中心扫过，使其成为饼图段、色轮和旋转指示器的首选。从内置预设（Lime Swiss、Sunset、Sky、Aurora）之一开始，或从头开始设计。
如何生成 CSS 渐变
整个过程耗时不到一分钟。
- 01
选择渐变类型
从类型选择器中选择线性、径向或锥形。对于线性，还要设置角度。预览会立即更新。
- 02
添加和定位颜色停止点
单击添加停止点插入新停止点，然后拖动其滑块或输入百分比来定位它。支持最多六个停止点 — 停止点会自动按位置重新排序。
- 03
为每个停止点选择颜色
单击颜色样本打开系统颜色选择器，或直接输入十六进制值。RGB 和十六进制格式都有效。
- 04
实时预览
预览面板使用浏览器的原生渐变引擎渲染你的渐变，所以结果与 CSS 在生产中产生的结果完全匹配。
- 05
复制 CSS 声明
单击复制获取完整的 background: linear-gradient(...) 声明。粘贴到样式表、styled component 或 Tailwind 任意值（如 bg-[<value>]）中。
常见渐变用例
每种渐变类型在不同场景中表现出色。
- 01英雄部分背景 — 135° 线性渐变用于现代对角扫过。
- 02按钮悬停状态 — 微妙的两停止点线性渐变用于深度。
- 03径向聚光灯或晕影 — 深色至透明径向叠加在图像上。
- 04饼图和进度环 — 硬停止点的锥形渐变。
- 05色轮选择器预览 — 全谱锥形渐变。
- 06文本渐变 — 将渐变应用于背景，然后使用 background-clip: text。
完全在浏览器中运行
渐变生成器 100% 客户端运行 — 没有数据发送到任何服务器。预览由浏览器自己的 CSS 引擎渲染，这意味着你看到的与任何访客用相同的 CSS 看到的浏览器将渲染的完全匹配。
一个实际注意：电子邮件客户端仍然对 CSS 渐变支持不完整。如果你将生成的 CSS 粘贴到 HTML 电子邮件模板中，在渐变声明之前添加纯色 background-color 回退，以便旧客户端的收件人看到合理的内容。
CSS 渐变生成器常见问题
线性、径向和锥形渐变之间有什么区别?
线性渐变沿给定角度的直线过渡。径向渐变从中心点向外扩展 — 对高亮和聚光效果有用。锥形渐变像时针一样围绕中心扫过 — 适合饼段和色轮。
我可以在 Tailwind CSS 项目中使用这个吗?
可以。复制生成的值并将其用作 Tailwind 任意值，例如：bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]。Tailwind 会在输出样式表中包含它。
预览与我在实时网站上看到的完全匹配吗?
是的 — 预览由相同的浏览器渐变引擎渲染，该引擎将渲染你的实时 CSS，所以输出是像素级精准的。
我可以在电子邮件模板中使用 CSS 渐变吗?
大多数电子邮件客户端不能可靠地支持 CSS 渐变。始终在你的渐变声明之前添加纯色 background-color 作为回退。
颜色停止点的数量有限制吗?
生成器支持最多六个停止点。对于大多数设计，两到四个就足够了；超过六个往往会降低清晰度而不是增加丰富度。