在线免费CSS渐变生成器
创建漂亮的CSS线性、径向和锥形渐变，实时预览，一键复制CSS代码。
Who uses the CSS渐变生成器?
- 为英雄区块和 UI 组件创建背景渐变的前端开发者。
- 为基于渐变的视觉形象和品牌色彩过渡做原型设计的设计师。
- 通过可视化交互式构建器理解渐变语法的 CSS 学习者。
How the CSS渐变生成器 works
选择渐变类型：Linear（线性）、Radial（径向）或 Conic（锥形）。
点击某个色标的色块，通过取色器更改其颜色。
使用每个色标旁边的滑块调整其位置，或点击“+ Add color stop”添加新色标。
调整角度（线性/锥形渐变），然后从输出面板复制 CSS 代码。
Tips & tricks
- 至少需要 2 个颜色停靠点——只有当色标数量达到 3 个或以上时，删除（×）按钮才会出现。
- 径向渐变会隐藏角度控制项，因为居中的圆形渐变没有方向可调。
- 无论你添加色标的先后顺序如何，输出的 CSS 中色标始终按位置顺序排列。
- 取色器不支持 alpha（透明度）通道——如果需要透明色标，请在复制的 CSS 中手动添加 rgba()。
Frequently Asked Questions
线性渐变的 CSS 语法是什么？
background: linear-gradient(方向, 颜色1, 颜色2)。例如：background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)。方向可以是角度（45deg）或关键字（to right、to bottom right）。
如何创建径向渐变？
background: radial-gradient(形状 尺寸 at 位置, 颜色1, 颜色2)。例如：background: radial-gradient(circle at center, #f6d365 0%, #fda085 100%)。本工具生成的是居中的圆形径向渐变。
可以添加两个以上的颜色停靠点吗？
可以。根据需要多次点击“+ Add color stop”。每个色标都有自己的取色器和位置滑块，输出的 CSS 中色标会自动按位置排序。
如何创建透明渐变？
对透明色标使用带 alpha 的 rgba() 或十六进制值。例如：linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) 会创建一个渐暗效果——常用作英雄图片上的遮罩，以提升文字可读性。本工具的取色器不包含 alpha 通道，如需透明度，请手动编辑复制出的 CSS。
CSS 渐变在所有浏览器中都能用吗？
CSS 渐变在所有现代浏览器（Chrome、Firefox、Safari、Edge、Opera）中都受支持。现代浏览器严格来说不需要厂商前缀（-webkit-），不过本工具的输出中仍会附带一行带 -webkit- 前缀的代码，以覆盖较旧的浏览器。
Is my data safe when using the CSS渐变生成器?
Completely safe. The CSS渐变生成器 processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSS渐变生成器 output in commercial projects?
Yes. The CSS渐变生成器 is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSS渐变生成器 follow official standards?
Yes. The CSS渐变生成器 is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.