CSS 渐变生成器

工具介绍

CSS 渐变是浏览器根据一组颜色实时生成的图像，不是上传的文件——linear-gradient() 沿指定角度的直线方向过渡颜色，radial-gradient() 则从中心点向外扩散过渡颜色。两者都接受两个及以上的颜色节点，每个节点可以单独指定在渐变中的位置。

手写渐变代码很容易出小错：节点顺序、漏写百分比，或者角度方向搞反（CSS 的角度是从「to top」开始顺时针计算的，和数学角度的方向不一样）。这个工具把这些语法细节都藏了起来——用取色器和滑块设置颜色和位置，预览框实时更新，效果满意后直接复制生成的 CSS。

来源：CSS Images Module Level 3, W3C —— 定义 linear-gradient() 和 radial-gradient() 语法的规范文档。

为什么使用它？

• 每次调整颜色、位置或角度都会实时刷新预览，不用刷新页面就能看到结果。
• 一键切换线性/径向渐变；切到径向渐变时角度控件会自动隐藏，因为径向渐变不需要角度。
• 支持添加或删除颜色节点（2 到 4 个），不局限于只有两种颜色的渐变。
• 每个节点都有独立的位置滑块，节点之间不必均匀分布。
• 生成标准的 linear-gradient()/radial-gradient() 语法，可以直接复制使用。
• 全部在浏览器本地计算，你调整的任何参数都不会上传。免费、不用注册，手机上也能用。

使用方法

1. 选择渐变类型：线性或径向。
2. 线性渐变可以拖动角度滑块——90deg 是从左到右，180deg 是从上到下，以此类推。
3. 给每个节点设置颜色和位置；第一个节点是渐变的起始色，最后一个是结束色。
4. 点击「+ 添加节点」最多可以加到 4 个节点做多色渐变，也可以点 ✕ 删除节点（最少保留 2 个）。
5. 复制生成的 CSS，粘贴到 background 或 background-image 声明里。

示例

输入

线性 · 角度：90deg · 节点：#f97316 位于 0%，#ec4899 位于 100%

输出

background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);

从左到右、橙色过渡到粉色的渐变——按钮、横幅和首页大图背景很常见的风格。

线性渐变 vs 径向渐变

线性渐变沿一条直线过渡颜色，方向由角度控制——适合横幅、按钮和有明确方向感的背景。径向渐变从中心点向外以同心圆的方式过渡颜色，更适合聚光灯效果、徽章或光晕类背景。这个工具的径向渐变默认用居中的正圆形状，覆盖了大多数径向渐变的常见用法；如果需要椭圆形状或偏移中心点，CSS 也支持，可以在复制出的代码基础上手动调整。

常见的渐变用法

• 低调的品牌色点缀：两个相近的色调、较小的角度，做出柔和的背景晕染效果。
• 高对比度的行动按钮：两个饱和度高的互补色，角度设为 90deg 或 135deg，效果醒目、点击欲强。
• 图片上的遮罩层：从透明过渡到实色（可以在取色器底层十六进制颜色上加透明度，或者复制代码后手动改成 rgba），叠加在 background-image 上。
• 多节点彩虹/品牌渐变：在 0–100% 范围内均匀分布 3–4 个节点，比双色渐变过渡得更平滑、更细腻。
• 径向聚光灯效果：靠近 0% 的中心节点用亮色，靠近 100% 的边缘节点用暗色，适合首页大图区域或卡片高亮。

配合其他 CSS 工具一起用

渐变经常和圆角、阴影一起用在同一个元素上——带柔和阴影和圆角的渐变卡片是很常见的 UI 样式。可以分别生成每一部分，再把 CSS 声明合并到同一个元素上。

→ 盒阴影生成器 · 圆角生成器 · 取色器

常见问题