渐变背景生成器

什么是在线渐变背景生成器？

渐变背景是网页设计中最常用的视觉元素之一，从按钮、卡片到整页背景，平滑过渡的多色渐变能让界面更有层次感和现代感。本工具支持双色与三色渐变，方向可选左右、上下、对角、135 度以及径向扩散，调整后实时在画布上预览效果，并同步生成对应的 CSS 代码。

使用方式有两种：如果你在写网页，直接点击「复制」把 CSS 代码粘贴到元素的 background 属性即可，纯 CSS 实现、不占任何图片体积；如果你需要图片素材，可以按任意分辨率（默认 1920 × 1080）生成 PNG 背景图，用于幻灯片、海报、公众号封面或视频背景。

三色渐变通过中间过渡色实现更丰富的色彩层次；径向渐变从中心向外扩散，适合需要视觉聚焦的场景。所有颜色均为十六进制取值，生成结果准确可复现，整个流程在浏览器本地完成，无上传、无限制。

使用步骤

1. 选择起始颜色与结束颜色，如需中间色则勾选「启用第三色」并选择中间颜色；
2. 选择渐变方向（左右、上下、对角、135 度或径向）；
3. 设置生成图片的宽高，点击「生成渐变」实时预览；
4. 复制 CSS 代码用于网页，或点击「下载 PNG」保存背景图。

常见问题

生成渐变后如何用到网页上？

点击结果区的「复制」按钮即可复制 CSS 代码，粘贴到元素的 background 属性中使用；也可以点击「下载 PNG」保存为图片，用于 banner、海报或幻灯片背景。

线性渐变和径向渐变有什么区别？

线性渐变沿一条直线方向过渡颜色，适合页面背景、按钮；径向渐变以圆心向外呈圆形扩散过渡，适合焦点突出、灯光效果或头像背景等场景。

为什么下载的图片和预览颜色不一样？

预览时浏览器可能对颜色做了屏幕色彩管理，而 PNG 内嵌的是标准 sRGB 颜色值，在普通显示器上两者应基本一致。若差异明显，请检查显示器色域设置。

可以生成三色或更多颜色的渐变吗？

可以。勾选「启用第三色」即可加入中间过渡色；CSS 代码支持任意多个颜色停止点，你可以在复制后手动追加更多颜色，例如加一个 25% 位置的颜色。

渐变图片会占用服务器资源吗？

不会。渐变在浏览器本地绘制，不经过任何服务器，不消耗你的流量，也没有数量限制。