生成创意 · 浏览器本地
渐变图生成器 — 渐变背景图 + CSS 代码
在线生成渐变背景图:线性 / 径向渐变,颜色角度可调,内置配色预设,1080P / 2K / 4K 壁纸尺寸一键选,导出 PNG / JPG,并附可复制的 CSS 渐变代码。支持电脑、平板、手机浏览器,本地生成、不上传。
渐变
尺寸
×px
实时预览
CSS 代码
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);
本地生成 · 不上传
支持电脑 · 平板 · 手机浏览器不上传服务器无水印本地处理
快速回答
渐变图是两种颜色平滑过渡的背景图片,常用作壁纸、海报底图、网页 Banner、直播背景。本工具选好起始色和结束色(或直接点配色预设),选线性 / 径向、调角度,输入尺寸或直接点 1080P / 2K / 4K / 手机竖屏预设,实时预览后导出 PNG / JPG。给开发者的福利:页面同时给出等效的 CSS linear-gradient / radial-gradient 代码,一键复制——如果你本来就是要网页背景,直接用 CSS 比贴图更轻。全程浏览器本地生成,不上传。
When
什么时候需要
壁纸 / 屏保
4K 渐变壁纸自己配色自己生成,不用到处找图。
海报 / 封面底图
设计海报、公众号封面时先铺一张渐变底再排版。
网页背景(CSS)
调好效果直接复制 CSS 渐变代码,不用贴图。
Trade-off
关于渐变图
好处
- 线性 / 径向 + 角度 + 配色预设,实时预览
- 1080P / 2K / 4K / 手机竖屏尺寸预设
- 附 CSS 渐变代码一键复制,本地生成不上传
注意
- 当前为双色渐变(不支持多色标 / 网格渐变)
- JPG 对平滑渐变可能有轻微色带,追求质量选 PNG
- 单边最大 7680px
Related
相关工具
FAQ
渐变图常见问题
大面积平滑渐变在 8 位色深下可能出现色带,JPG 压缩会加重。选 PNG 导出可以减轻;用作网页背景时直接用页面给的 CSS 代码,浏览器渲染效果最平滑。
当前支持双色(起始 + 结束),覆盖绝大多数壁纸 / 底图需求;多色标渐变后续按需求考虑。
电脑按屏幕分辨率选 1920×1080 / 2560×1440 / 3840×2160;手机选 1080×1920 竖屏预设,或按你手机分辨率自定义。
不会,渐变图用浏览器 Canvas 本地画出,不经过服务器。