如何创建 CSS 渐变

CSS渐变让您无需图像文件就能创建平滑的颜色过渡。它们比图像更轻量,完美适应任何屏幕大小,并且易于定制。与等效的JPG或PNG相比,典型的装饰性渐变可以节省20-100 KB,并且可以缩放到任何分辨率而不会损失质量。

CSS渐变的类型

线性渐变:颜色沿直线过渡(从上到下、从左到右,或任何角度)。

background: linear-gradient(135deg, #667eea, #764ba2);

径向渐变:颜色从中心点向外辐射,呈圆形或椭圆形图案。

background: radial-gradient(circle, #667eea, #764ba2);

圆锥渐变:颜色围绕中心点旋转,像色轮一样。

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

如何可视化创建渐变

1. 选择渐变类型:选择线性或径向,并设置角度或位置。
2. 添加颜色停止点:点击在渐变上的不同位置添加颜色。调整每种颜色及其位置。
3. 复制CSS:复制生成的代码并粘贴到您的样式表中。

使用可视化生成器比手动编写渐变语法更快,特别是在试验多个颜色停止点时。

CSS渐变的简史

在CSS渐变出现之前,网页设计师必须为任何渐变效果使用背景图像:水平平铺单列GIF,或将Photoshop PSD切片成多个JPG。这有效但增加了文件重量、网络请求,并在缩放时出现像素化。

WebKit在Safari 4(2009年6月)中添加了第一个-webkit-gradient()实现,语法冗长且难以阅读。Firefox 3.6(2010年1月)随后推出了-moz-linear-gradient()。CSS工作组在CSS Image Values Level 3(2012)中标准化了无前缀的linear-gradient()和radial-gradient(),此时浏览器前缀开始消失。

圆锥渐变(conic-gradient())出现晚得多,首次在Chrome 69(2018年9月)中发布,在Safari 12.1(2019年3月)中达到所有主流浏览器。它们启用了以前没有图像就不可能实现的视觉模式:饼图、色轮、棋盘、放射状图案。

CSS渐变现在被认为是基线浏览器功能。几乎所有您可能想要的渐变效果都可以在CSS中实现,无需图像或JavaScript。

常见的渐变模式

英雄区背景:细微的双色渐变增加深度,不会分散文本注意力。

background: linear-gradient(135deg, #0f172a, #1e3a5f);

按钮高亮:轻微的渐变使按钮感觉立体。

background: linear-gradient(180deg, #3b82f6, #2563eb);

图像上的叠加层:渐变叠加层提高了照片上文本的可读性。

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

强调边框:使用渐变作为边框以增加视觉趣味。

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

动画网格渐变:堆叠多个径向渐变并动画化位置。

background:
  radial-gradient(at 20% 30%, #667eea 0%, transparent 50%),
  radial-gradient(at 80% 70%, #764ba2 0%, transparent 50%),
  #0f172a;

玻璃态背景:将低不透明度渐变与backdrop-filter模糊配对。

background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
backdrop-filter: blur(10px);

颜色停止点定位

默认情况下,颜色停止点是均匀分布的。您可以覆盖它们的位置来控制每种颜色出现的位置:

/* 黄色在中间60%,在边缘渐变为红色 */
background: linear-gradient(90deg, red 0%, yellow 20%, yellow 80%, red 100%);

您还可以使用硬停止点创建条纹或几何图案,无需抗锯齿:

/* 双色条纹无过渡 */
background: linear-gradient(45deg, #667eea 50%, #764ba2 50%);

诀窍是将两个颜色停止点放在相同位置。浏览器不会在它们之间插值,产生锐利的边缘。

何时使用渐变与纯色与图像

• 纯色:最适合主要表面背景(卡片、模态框、导航)。可预测且可读。
• CSS渐变:最适合装饰性背景、英雄区、按钮悬停状态、叠加效果。文件重量低、可缩放、可动画化。
• 背景图像(JPG/PNG):最适合摄影背景或渐变无法复制的复杂艺术作品。
• SVG渐变:当您需要渐变作为图标或插图的一部分时最佳,特别是当渐变必须随SVG几何缩放时。

常见模式是将三者分层:纯色基础、CSS渐变叠加层和顶部低不透明度纹理图像。

常见陷阱

• 平滑渐变上的色带:在8位彩色显示器(较旧的显示器、一些移动屏幕)上,具有相似颜色的平滑渐变可能显示可见的色带。添加细微的噪点纹理叠加层可以减少此伪影。
• 渐变角度混淆:linear-gradient(0deg, ...)从底部开始向上;linear-gradient(90deg, ...)从左到右;linear-gradient(180deg, ...)从上到下。角度指示渐变流向的方向,而不是从哪里。
• 许多停止点的性能:具有20+颜色停止点的渐变使用更多GPU内存,可能减慢移动设备上的滚动。对于网格渐变效果,通常3-5个停止点产生几乎相同的视觉结果,但性能更好。
• 渐变上的文本对比度:在渐变最亮部分上读起来很好的标题可能在最暗部分上变得难以阅读。使用text-shadow属性或深色文本轮廓作为安全网。
• 较旧的浏览器兼容性:如果您必须支持IE11或非常旧的移动浏览器,圆锥渐变不可用。线性和径向渐变在现代环境中无处不在。
• RTL语言中的渐变方向:在阿拉伯语或希伯来语布局中,从左到右的渐变从读者的角度向后流动。在两个方向都测试或使用CSS逻辑属性。

提示

• 保持微妙:最好的渐变几乎不被注意。两种相似颜色之间的轻微变化增加了深度。戏剧性的彩虹渐变很少看起来专业。
• 使用渐变而不是图像:CSS渐变以零网络请求即时加载。在可能的情况下用渐变替换装饰性背景图像。
• 在暗模式下测试:在浅色背景上看起来很棒的渐变在暗模式下可能会褪色或冲突。考虑为每个主题定义不同的渐变。
• 注意文本对比度:如果您将文本放在渐变上,请检查文本在整个渐变范围内的可读性,而不仅仅是最亮或最暗的部分。
• 使用色彩空间感知语法:linear-gradient(in oklch, #667eea, #764ba2)产生比默认sRGB插值更平滑的感知过渡。支持Chrome 113+、Safari 16.4+、Firefox 113+。
• 使用DevTools检查:Chrome和Firefox DevTools在您将鼠标悬停在Styles面板中的渐变值上时显示可视化渐变编辑器。调整现有渐变的最快方法。

隐私

CSS渐变生成器完全在您的浏览器中运行。您选择的颜色、您尝试的渐变配置以及您生成的CSS永远不会离开您的设备。没有遥测,没有使用跟踪,没有上传您的设计选择。对于设计探索期间使用的工具,这很重要:您尝试的颜色和模式可能会泄露即将到来的品牌方向、未宣布的产品主题或NDA下的客户工作。仅浏览器生成将所有这些保留在您的机器上。