CSS 渐变生成器
使用自定义色标和角度构建线性、径向或锥形 CSS 渐变，实时预览效果，并复制 background 规则。
正在加载工具…
CSS 渐变生成器 — 选择渐变类型，设置角度，然后按需添加任意数量的色标——每个色标都有自己的颜色和位置百分比。实时预览框会随编辑即时更新，并显示可直接粘贴的 CSS background 规则，方便一键复制。一切都在你的浏览器中完成，颜色和 CSS 绝不会发送到服务器。
CSS 渐变生成器 是什么？
CSS 渐变生成器是一款免费的在线工具，专为需要快速生成渐变而又不想手写语法的网页设计师和前端开发者打造。你可以选择线性、径向或锥形渐变，为线性和锥形类型设置角度（度），并为每个色标指定一个 HEX 颜色和位置百分比。编辑时，实时预览会显示效果，对应的 CSS background 规则也会即时更新，方便你直接复制到样式表中。可用它设计按钮、首屏背景、卡片和叠加层，或学习 linear-gradient()、radial-gradient() 和 conic-gradient() 函数的用法。
如何使用 CSS 渐变生成器
- 选择渐变类型：线性、径向或锥形。
- 对于线性或锥形渐变，设置角度（0-360 度）；径向使用居中圆形，忽略角度。
- 编辑每个色标：输入或选取一个 HEX 颜色，并设置其位置百分比（0-100）。
- 点击“添加色标”插入新颜色，或点击垃圾桶图标删除色标（至少保留两个色标）。
- 观察实时预览框的更新，然后用复制按钮复制生成的 CSS background 规则。
示例
简单的双色线性渐变
输入
线性，90deg，#4f86f7 位于 0%，#9333ea 位于 100%
输出
background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);
三色标径向渐变
输入
径向，色标 #ffffff 0%、#4f86f7 50%、#1e3a8a 100%
输出
background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);
用于色轮的锥形渐变
将类型切换为锥形，设置起始角度，并在均匀分布的位置添加多个色标，让颜色围绕中心点旋转——非常适合制作类似饼图的色块或加载转圈动画。
常见问题
- 支持哪些渐变类型？
- 三种：linear-gradient（带角度，单位为度）、radial-gradient（居中圆形）和 conic-gradient（带起始角度）。用类型切换按钮在它们之间切换，CSS 会即时更新。
- 色标和位置是如何工作的？
- 每个色标都有一个颜色和一个 0 到 100 的位置百分比。色标按它们在列表中出现的顺序写入 CSS，与浏览器的解释方式完全一致，因此顺序由你直接控制。你可以用“添加色标”增加色标，也可以删除至最少两个。
- 可以可视化选色而不用手动输入 HEX 吗？
- 可以。点击每个色标旁的小色块即可打开浏览器内置的取色器，或直接在颜色框中输入像 #4f86f7 这样的 HEX 值。预览和 CSS 会随你的更改而更新。
- 为什么径向渐变没有角度字段？
- 这里的径向渐变被绘制为居中圆形，不使用角度，因此角度字段只在线性和锥形类型中显示，因为在这两种类型中角度会改变方向。
- 我的颜色或 CSS 会被上传到任何地方吗？
- 不会。渐变完全在你的浏览器中通过本地字符串和颜色运算构建——任何颜色、CSS 或设置都不会被发送到服务器，因此它可离线使用并为你的工作保密。