🌈

CSS渐变生成器

可视化构建 CSS 线性与径向渐变。添加色标、调整位置、设置角度,并一键复制可直接使用的 CSS。

生成器工具 本地运行 不发送数据
CSS 渐变线性渐变径向渐变色标
渐变类型
角度
色标
预览
CSS 输出
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

什么是 CSS渐变生成器?

CSS渐变生成器是用于构建 CSS 线性与径向渐变的可视化工具。你可以添加色标,在 0—00% 范围内设置其位置,为线性渐变选择角度,并实时查看结果。最终的 CSS 属性可直接粘贴到任何样式表中。

如何使用 CSS渐变生成器

  1. 选择线性或径向渐变类型。
  2. 对于线性渐变,使用滑块设置角度。
  3. 点击颜色选择器并调整位置,以编辑默认色标。
  4. 如需,使用“添加色标”按钮添加更多色标。
  5. 点击“复制 CSS”将渐变属性复制到剪贴板。
CSS 渐变语法 ▾
示例
输入 线性,135°,色标 1:#7c6af7 于 0%,色标 2:#06b6d4 于 100%
输出 background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
常见使用场景
  • 为落地页和 UI 组件生成背景渐变
  • 为首屏区域创建渐变叠加层
  • 为图表或分隔线构建色标图案
  • 在转移到设计工具前制作渐变创意原型
常见问题
支持哪些渐变类型?

支持带自定义角度(0—60°)的线性渐变和径向渐变(圆形)。

可以添加两个以上的色标吗?

可以。点击“添加色标”即可添加任意数量的色标。每个色标都有独立的颜色和位置。

如何控制线性渐变的方向?

使用角度滑块。0° 表示从上到下,90° 表示从左到右,135° 表示沿对角线方向。

输出是否兼容多种浏览器?

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.