CSS 渐变生成器
CSS 渐变生成器，是指在线可视化调节颜色断点、角度与渐变类型，实时预览并一键复制 linear-gradient（线性）、radial-gradient（径向）、conic-gradient（锥形）代码的前端工具。它免费、无需注册，支持增删断点、拖调角度、设置透明度，以及导出纯 CSS、带浏览器前缀与 Tailwind 任意值多种格式。本工具最大的特点是预览区直接渲染最终 CSS，所见即所得、无二次转换差异，你在页面看到的效果和把代码粘到网页里的效果完全一致。渐变的生成与解析全在浏览器本地完成，渐变内容不上传、不外发。
deg
角度遵循 CSS 规范：0deg 向上、90deg 向右、180deg 向下，顺时针增大。
颜色断点（2）
#1%
#2%
渐变至少需要 2 个颜色断点，无法再删。
生成的代码
background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
🔒 渐变的生成与解析全部在你的浏览器本地完成，渐变内容不上传、不外发。预览区直接渲染最终 CSS，所见即所得。
如何使用CSS 渐变生成器
1
选择渐变类型（线性/径向/锥形）并设置方向或几何：线性拖角度盘或点方向快捷键，径向选形状/尺寸/圆心，锥形设起始角与圆心。
2
增删颜色断点：点「＋」加断点、用取色器或手输 HEX/RGBA 调颜色、拖动位置百分比，最少 2 个、最多 20 个。
3
在底部代码区切换纯 CSS / 带前缀 / Tailwind / 片段四种格式，点「复制代码」即可粘到你的项目里使用。
常见问题
- CSS 渐变生成器会上传数据吗？安全吗？
- 不会上传。CSS 渐变生成器全程在你的浏览器本地生成与解析渐变代码，你的渐变颜色、断点等内容不会发送到服务器、不外发，预览区直接用生成的同一串 CSS 渲染，关闭页面即清除，安全放心。（站点自身仅有匿名访问量统计，与你编辑的渐变内容无关。）
- 手机上能用 CSS 渐变生成器吗？需要装软件吗？
- 可以，且无需下载任何 App 或软件。CSS 渐变生成器是纯网页实现，手机、平板、电脑浏览器打开即用，取色、拖角度、调断点都支持触控操作，无需注册登录，随时随地在线生成渐变背景代码。
- CSS 渐变生成器支持锥形渐变（conic-gradient）吗？
- 支持。CSS 渐变生成器完整支持线性、径向、锥形三种渐变，锥形渐变可设置起始角与圆心位置，常用于做色轮、饼图、进度环等效果。conic-gradient 在现代主流浏览器均已支持，个别老旧内核可能不渲染，属正常兼容差异。
- 生成的 CSS 渐变代码需要加浏览器前缀吗？
- 大多数情况不需要。linear/radial/conic-gradient 在现代主流浏览器早已原生支持，直接用无前缀写法即可。如需兼容较旧环境，可在「带前缀」标签导出 -webkit- 版本；本工具的前缀版沿用标准语法，不模拟已淘汰的老式 WebKit 角度语义（那会导致角度错乱）。
- 线性渐变的角度 deg 怎么理解（0deg 向上、90deg 向右）？
- CSS 线性渐变角度以「渐变指向的方向」为准：0deg 表示自下而上（指向上方），随角度顺时针增大，90deg 指向右、180deg 指向下、270deg 指向左。这与数学坐标角度和老式 WebKit 角度都不同，本工具的角度盘与最终代码严格遵循 CSS 规范，所见即所得。
- CSS 渐变生成器能导出 Tailwind 代码吗？
- 能。在代码区切换到「Tailwind」标签，即可得到 bg-[linear-gradient(...)] 形式的任意值类名，内部空格已按 Tailwind 要求转义为下划线，可直接粘进 className 使用，无需再手动改写。
- CSS 渐变生成器能粘贴已有代码反解析继续编辑吗？
- 可以。把一段标准的 linear/radial/conic-gradient 代码粘到「反解析」框点击解析，即可还原成可视模型继续微调。解析为尽力而为，覆盖标准单条渐变；对多层背景、命名色、color-mix() 等极端写法可能失败，此时会明确提示且不会破坏你当前的编辑。
CSS 渐变语法速查表
| 写法 | 含义 | 示例 |
|---|---|---|
| linear-gradient(角度, 断点…) | 线性渐变，角度决定方向（0deg 向上、90deg 向右） | linear-gradient(90deg, #6a11cb, #2575fc) |
| radial-gradient(形状 尺寸 at 圆心, 断点…) | 径向渐变，从圆心向外辐射 | radial-gradient(circle at 50% 50%, #fff, #000) |
| conic-gradient(from 角度 at 圆心, 断点…) | 锥形渐变，绕圆心一圈扫描 | conic-gradient(from 0deg, red, blue) |
| repeating-*-gradient(…) | 重复渐变，用于条纹等周期性图案 | repeating-linear-gradient(45deg, #3b82f6 0 10px, #1e3a8a 10px 20px) |
| 颜色 位置% | 断点：颜色 + 可选位置，位置留空则自动均匀分布 | #ff0000 0%, #0000ff 100% |
| rgba(r,g,b,a) / #rrggbbaa | 带透明度的断点颜色，可做渐隐效果 | rgba(0,0,0,0.5), #00000080 |