CSS 渐变生成器

关于 CSS 渐变生成器

此工具以可视化方式构建 CSS 渐变，并给出可直接粘贴到样式表中的确切代码。你不必手动猜测颜色值和角度，只需选择两种颜色和一个方向，实时观察预览更新，效果满意后复制 background 规则即可。它适合按钮、主视觉区域、卡片背景、横幅以及任何需要平滑颜色过渡的界面元素。

工作原理

你选择两种颜色和一种渐变类型：

• 线性渐变 — 颜色沿着你设定角度（0–360°）的直线方向过渡，因此渐变可以从上到下、从左到右、斜向，或任意方向。
• 径向渐变 — 颜色以圆形方式从中心向外过渡。

预览面板会立即显示结果，输出框会给出可直接使用的 CSS，例如 background: linear-gradient(45deg, #…, #…);，可直接复制到你的样式中。

假设与行为

• 生成一个双色渐变（起始色和结束色）。
• 线性渐变使用以度为单位的角度；按照 CSS 惯例，0° 指向上方，90° 指向右方。
• 径向渐变以圆形方式从中心向外过渡；由于角度不适用于此类型，角度控件会被隐藏。
• 生成的 CSS 是标准写法，在所有现代浏览器中无需厂商前缀即可使用。

局限

• 仅支持两个颜色节点。 不支持三个或更多颜色节点、自定义节点位置，或多层叠加渐变——如需这些效果，需要手动编辑 CSS。
• 只提供线性和径向渐变，不支持锥形渐变或重复渐变。
• 径向渐变使用默认的居中圆形；不提供形状、大小或位置关键字的设置。
• 它只生成 background 声明；不处理非常老旧浏览器的回退方案（如今很少需要）。

隐私

渐变及其 CSS 完全在你的浏览器中生成。不会上传或存储任何内容。