渐变壁纸生成器，免费

关于渐变

CSS 渐变允许创建平滑的颜色过渡而无需图片，从而减小文件体积并提升性能。此工具既生成可作为壁纸使用的 PNG 文件，也生成可在网站上复用的 CSS 代码。

常见问题

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

线性渐变按指定角度直线流动。径向渐变从中心点向外辐射。锥形渐变围绕中心点旋转，像色环一样。每种都会产生不同的视觉效果。

可以在我的网站上使用 CSS 渐变吗？

当然可以！CSS 渐变受所有现代浏览器支持，且不需要图片。它们可适配任意尺寸，加载速度更快，在任何屏幕上都清晰可见。将此工具生成的 CSS 复制到您的样式表中即可。

适合我设备的最佳分辨率是多少？

桌面显示器通常使用 1920×1080，笔记本各不相同，4K 屏幕使用 3840×2160，iPhone 为 1080×1920，iPad 为 2048×2732。选择与您设备匹配的分辨率，以获得清晰无瑕的壁纸。

网页渐变：简史

渐变在印刷和喷枪艺术中有着漫长的前数字历史。「渐变」作为从一种颜色到另一种颜色的平滑过渡，这一词汇直接源自十九世纪末的石版印刷术和喷枪海报艺术；包豪斯设计学院学生在1920年代就已系统练习色调渐变，远早于任何像素将其推向屏幕。

数字渐变在1990年代初诞生于两个相邻的时刻。Adobe Photoshop 1.0（1990年2月）从发布之日起便提供了渐变工具，采用「混合」算法在前景色和背景色之间进行线性和径向插值。Adobe PostScript Level 2（1991年）将着色图案作为一等语言特性引入；在此之前，PostScript Level 1无法原生描述渐变，只能用增量灰度的色带填充来模拟。PostScript Level 3（1997年）新增了Type 6（Coons曲面片）和Type 7（张量积）网格着色，为1990年代末杂志行业的每一个印刷渐变提供支持。Adobe Illustrator的网格渐变工具随后在第8版（1998年）推出。

CSS渐变在网页上的到来比人们记忆的要晚。WebKit的 -webkit-gradient() 于2008年随Safari 4和Chrome 1发布，使用其特有的冗长语法。Mozilla的 -moz-linear-gradient() 随Firefox 3.6（2010年1月）跟进，使用了最终成为标准的语法。无前缀的 linear-gradient() 和 radial-gradient() 于2012年4月达到W3C候选推荐标准，并从约2013年起可广泛使用。conic-gradient() 则新得多，Chrome 69于2018年9月（需开启实验性标志）首次发布，Chrome 75（2019年6月）默认启用，Firefox 83（2020年11月）随后支持。它现已作为Baseline功能在所有现代浏览器中可用。

拟物化、扁平化，再到渐变

渐变成为1990年代末至2000年代初网页设计的视觉语言，苹果Aqua界面（2000年）那些玻璃质感、立体斜角、带反光的Web 2.0按钮，本质上就是嵌套渐变：顶部是锐利的内高光，底部是柔和的渐隐主体。扁平化设计运动以微软Metro（Windows Phone 7，2010年）和苹果iOS 7（2013年）为核心，通过彻底去除UI中的阴影、斜角和混合效果，对渐变堆砌的拟物主义作出反击。在大约五年间（2013-2018年），渐变风格不再时髦。

钟摆从2017年起大幅回摆。Stripe官网上的彩色网格动态渐变设定了整个SaaS行业竞相模仿的模板。Instagram 2016年的品牌Logo重塑，将扁平的相机图标替换为饱和的粉橙紫渐变（刻意呼应1980年代摄影品牌Logo）。到这十年末，渐变再度无处不在，但带来了全新词汇：网格渐变、模糊光斑、OKLCH平滑过渡、注重无障碍性。Tailwind CSS 4（2025年1月）推出了精心策划的默认渐变工具集，其中包含带色相插值提示的锥形渐变。

CSS渐变语法一览

三种CSS渐变函数均接受一组颜色节点和一个方向：

• linear-gradient(angle, colors…)：CSS中的角度使用罗盘方位约定：0deg 朝上（第一个颜色在底部），90deg 朝右，180deg 朝下（默认值），270deg 朝左。注意这与数学极坐标角度相反。您还可以使用关键词：to top right 计算角度使渐变线穿过对角线，在非正方形容器上与135°渐变并不等同。
• radial-gradient(shape size at position, colors…)：颜色从中心点向外扩散。circle 或 ellipse；尺寸关键词 closest-side、farthest-corner；位置默认为中心。
• conic-gradient(from angle at position, colors…)：颜色绕中心点顺时针旋转，如同色轮。适用于饼图、扫描效果以及「环形图」外观。三种渐变的重复变体（repeating-linear-gradient 等）会将颜色节点无限平铺。

硬色标（将两个颜色节点置于同一百分比位置）会产生清晰的色带而非平滑过渡：linear-gradient(red 0%, red 50%, blue 50%, blue 100%) 是两色分割，而非渐变。适用于条纹、分段颜色卡片或伪边框。

OKLCH革命与浑浊的中间点

在默认sRGB插值下，从纯红 #ff0000 到纯绿 #00ff00 的渐变，在中间点附近会经过一个去饱和的浑浊黄棕色 #7f7f00。这是因为sRGB线性插值在中间点同时降低了R和G通道，而我们的眼睛感知到的中间点比两端颜色暗得多、饱和度低得多。这是经典的网页设计痛点。

CSS颜色模块第4级新增了感知均匀色彩空间，以及在其中插值渐变的能力：linear-gradient(in oklch, red, green)。OKLCH（及其兄弟色彩空间OKLab），由Björn Ottosson于2020年12月设计，将亮度、彩度和色相分离，使得沿色相轴插值时能选择色轮上的最短路径，全程保持饱和度。同一红绿渐变在OKLCH中，中间点呈现出鲜艳的黄色。

通用规则：

• 两种类似色相（红到橙、蓝到紫）：sRGB与OKLCH效果相近，通常无问题。
• 两种互补色相（红到绿、蓝到橙）：sRGB产生浑浊灰色，OKLCH产生鲜艳的色相扫描。OKLCH明显更优。
• 一种颜色到白或黑：sRGB在中间点显得暗淡；OKLCH保持感知亮度平滑变化。
• 两种相近亮度的低饱和颜色：差异极小。

浏览器支持：渐变的 interpolation-method 于Safari 16.2（2022年12月）、Chrome 111（2023年3月）和Firefox 113（2023年5月）发布，现已作为Baseline广泛可用功能。

分辨率预设：选择合适的像素尺寸

尺寸小于屏幕的壁纸会被拉伸变模糊；尺寸过大则浪费文件空间和内存。2026年的常见目标：

分辨率	通用名称	适用场景
1920×1080	全高清 / 1080p	2026年最主流的笔记本和桌面显示器
2560×1440	QHD / 2K	主流游戏和创作者显示器
3440×1440	UWQHD超宽屏	曲面21:9超宽显示器
3840×2160	4K / UHD	高端桌面机和Apple Studio Display
5120×2880	5K	Apple iMac Retina、Studio Display
1080×1920	手机竖屏	通用FHD安卓基准
1170×2532 / 1290×2796	现代iPhone	iPhone 13-16系列（19.5:9比例）
2048×2732	iPad Pro 12.9英寸	4:3平板电脑

适用场景

• 个人设备壁纸：桌面、锁屏、主屏，乃至智能手表表盘背景。
• 视频会议虚拟背景。纯色渐变对Zoom/Teams/Meet的自动抠图效果比繁杂照片更友好，能减少演讲者周围的「光晕」伪像。
• 社交媒体页头图：Twitter/X 1500×500、LinkedIn 1584×396、YouTube频道横幅2560×1440（需考虑安全区域）、Instagram Stories 1080×1920。
• 品牌标识渐变。Stripe的紫蓝色网格渐变、Instagram的粉橙紫、Spotify的青绿到深绿、Slack的紫粉红，均为定义品牌形象渐变的真实案例。
• 网页英雄区块。尽管CSS渐变通常直接通过 background-image 应用，PNG降级方案对于邮件仍有价值（大多数邮件客户端至今无法可靠渲染CSS渐变），以及对于不支持 oklch 插值的浏览器。
• 空状态、加载骨架屏、仪表盘卡片：这些UI界面能从温和的视觉趣味中受益，同时不会令人分心。
• 印刷与周边。4K分辨率壁纸在300 DPI下大约覆盖12 × 18英寸的海报。

无障碍访问：渐变上的文字

渐变背景最常见的实际错误是叠加文字时对比度不足。WCAG 2.2 SC 1.4.3（对比度最低要求，AA级）对正文要求 4.5:1，对大号文字（18pt常规或14pt粗体）要求 3:1。WCAG是为纯色背景编写的；对于渐变背景，文字下方每个点的对比度都需满足要求，以最差点为准。

在渐变上叠加文字的实用修复方案：在文字下方添加半透明黑色或白色遮罩，将文字区域下的渐变亮度范围约束在窄区间内，或使用强文字阴影作为降级方案。竖向渐变（顶暗底亮）通常比斜向渐变对文字更友好，从左到右排列的文字在每行遇到的背景亮度保持不变；45°渐变下的长文本块迫使每行都要横跨整个亮度范围，使保持一致对比度的难度大幅上升。

更多问题

为什么我的渐变出现了明显的色带？

通常有两个原因。其一，JPEG压缩：JPEG基于DCT的编码在平滑的色调渐变上会产生明显的「块状」效果，在低饱和区域尤为突出。请改用PNG或无损WebP保存。其二，8位每通道的颜色深度：两种相近颜色之间的8位渐变只有少数几个不同的色阶，眼睛有时能分辨出来。叠加一层细微的噪点/抖动（1-2%噪点）可通过引入自然变化来打散色带；许多高端设计工具会自动执行此操作。

桌面壁纸应使用线性、径向还是锥形渐变？

对于大多数壁纸，略带斜角的线性渐变（约135°）或偏心径向渐变效果最佳，两者都能制造不对称感而不显突兀。锥形渐变视觉效果醒目，但给人以「设计师刻意为之」的感觉，而非自然的背景氛围，因此更适合强调性界面（专辑封面、社交帖子），而非整天盯着看的壁纸。网格渐变（多个重叠径向渐变）是最现代的外观，但需要JS库或生成图像；用两种低饱和互补色的单径向渐变是一个不错的近似方案。

哪些配色组合效果最佳？

三种可靠的配色方案：类比色（色轮上相邻的两种颜色，如紫到蓝、橙到红），呈现平静和谐的感觉；单色（相同色相，不同亮度，如经典的Stripe蓝），呈现有品牌感的低调效果；三色+OKLCH（三到四种等间距颜色在感知空间中插值），呈现现代Stripe / Instagram风格。避免使用两种纯互补色（红/绿、蓝/橙），除非明确使用 oklch() 插值，否则sRGB会产生浑浊的中间点。

有任何内容会发送至服务器吗？

不会。渐变在您的浏览器中渲染到 <canvas> 上，PNG通过 canvas.toDataURL() 导出，CSS字符串由JavaScript在本地生成。您的颜色选择、尺寸以及生成的图像均不会离开页面。

相关工具