网格渐变背景怎么做:网状渐变多色 Hero 背景实战

你大概见过 Stripe、Linear、Vercel 那种落地页 Hero,背后一团团柔和发光的彩色斑块,紫色、青色、粉色之间没有明显的边界,像泼洒的颜料慢慢化开。那不是普通的线性渐变,而是网格渐变,也叫网状渐变(mesh gradient)。这篇文章讲清它的原理,给一段能直接复制的纯 CSS,再说说怎么把成品导出来用到项目里。

网格渐变和线性渐变差在哪

普通的 linear-gradient 只有一个方向,颜色沿一条直线从 A 褪到 B;radial-gradient 也只有一个圆心,颜色沿同心圆向外褪。两者都只能表达"两三种颜色之间的单调过渡",做出来的背景一眼就看得出是 CSS 渐变,平、干、没层次。

网格渐变是另一回事。它的本质是一张二维的控制点网格,每个点有自己的颜色和位置,点和点之间的像素靠四邻插值算出来,所以一张背景里可以同时融六到八种颜色,过渡是有机的、像极光那样会拐弯的。视觉密度上去了,氛围才出得来。这也是为什么 2024 年之后"好看"的落地页 Hero 几乎清一色用它。

用多个径向渐变叠出网格效果

真正的网格渐变在底层是 SVG 或逐像素双线性插值,但有一个对前端非常友好的近似做法:用多个 radial-gradient 叠在一起。

思路很简单。每一个控制点对应一个径向渐变,圆心放在控制点的位置,颜色到边缘逐渐透明,这样一个点就是一团软边缘的光斑。把好几团光斑叠在 background-image 的同一个属性里,它们边缘互相渗透,远看就像颜色在网格里互相融合。控制点越多、颜色铺得越开,网状感越强。

关键是每个径向渐变都要让颜色"软着陆":末端用透明色收尾,不要给硬的色标。叠在最底下再铺一个纯色或线性渐变兜底,免得叠加区域之外露出背景。

一段可以直接用的网格渐变 CSS

下面这段是 16:9 Hero 区常用的紫青粉配色,四个控制点分散在四个角附近,直接贴进你的样式表就能看到效果:

.mesh-hero {
  width: 100%;
  min-height: 480px;
  background-color: #1b1033;
  background-image:
    radial-gradient(at 18% 22%, #8b5cf6 0px, transparent 55%),
    radial-gradient(at 82% 18%, #06e6d7 0px, transparent 50%),
    radial-gradient(at 26% 84%, #ff4dd2 0px, transparent 52%),
    radial-gradient(at 88% 78%, #3b82f6 0px, transparent 48%);
  background-repeat: no-repeat;
}

at 18% 22% 这种写法把每个光斑的圆心钉在容器的相对位置,transparent 55% 让它在半径 55% 处彻底透明,留出和邻居融合的空间。想要更柔,把每个百分比再调大一点,让光斑铺得更开;想要更分明,就调小。最底下的 background-color 是兜底色,叠加区域之外不会露白。

我自己常用的几个调法

我做这类背景时有个习惯:不要一上来就堆十几个控制点。颜色一多,叠加区互相抵消,最后糊成一片发灰发棕的泥巴。我一般先放四到六个点把大色块定下来,觉得某个区域空、需要补层次,再单独加一个点,而不是平均撒满。

颜色上我更信任在感知均匀的色空间里取色,而不是在 RGB 里手填 hex。RGB 里均匀取色很容易撞出死亡荧光绿、或者几乎挑不到像样的深青和淡粉。配色这一步如果想先快速试不同的双色或多色过渡打底,可以先去 /zh/t/gradient-generator/ 把基础渐变和色标调顺,再把挑好的几个主色搬到网格渐变里当控制点颜色。

导出代码,落到真实项目里

手写四五个 radial-gradient 不难,但要拖控制点找位置、反复试颜色,在编辑器里改数字很折磨。/zh/t/gradient-mesh-generator/ 这个工具把这一步做成可视化:打开就有六个控制点,用鼠标或手指拖任意一个改位置,每个点都能单独取色,一共能加到 12 个,背景实时重算。

它支持两种导出。一种是 SVG 单文件,Figma 打开后每个光斑还能单独编辑,体积约 15 KB,适合要在多个尺寸复用的场景;另一种是 Canvas 逐像素双线性插值,导 2x 高清 PNG,适合最终交付就是平面图的 Hero 大图、社交配图、OG 图。如果你的环境不方便用 SVG 背景,它还能直接吐一段上面那样的多 radial-gradient CSS 兜底,一段声明从老浏览器到新浏览器都跑得起来。画布比例可以在 16:9、1:1、9:16、21:9 之间切,做 Hero、社交方图、手机壁纸、超宽 banner 都对得上尺寸。

放正文之前先想清楚对比度

最后提醒一句容易踩的坑:网格渐变本质上颜色繁杂,WCAG 对比度是按每个像素和前景文字算的,直接把正文压在 mesh 上几乎一定过不了无障碍检查。三个实战补救:把模糊拉强,让底色接近一个平均主色,对比度才可预测;在文字背后叠一块半透明深色或浅色面板,对面板算对比度;或者干脆把 mesh 当装饰,正文放在相邻的纯色板块上。网格渐变是用来做氛围的,不是用来直接铺正文的。

把这几点用顺,你做一张品牌质感的 Hero、卡片或封面背景,大概也就两三分钟的事。

---

Made by Toolora · Updated 2026-06-13