渐变网格

什么时候用

• 落地页 Hero 想要有颜色的纵深，又不想加载一张大图
• 把品牌主色柔和地铺满一整块区域，做卡片或弹窗底板
• 没有真实图片时的默认封面、头像底色，让占位也有内容
• 需要跟着主题色换一整套配色，用 filter 转个色相就能换

适用场景：页面 / 卡片

推荐取值

色斑层数

4–6 层

色标停靠

50%–70% 处提前淡出

整层模糊

0–40px

放大倍数

scale(1.2)–scale(1.5)

底色

#101018 之类的深中性色

别搞混

• 和「线性渐变 / 锥形渐变」的区别

  linear-gradient 只有一条渐变轴，conic-gradient 只有一个圆心，颜色沿一条线或一个角走；渐变网格是好几层 radial-gradient 各自带中心点叠起来，颜色在二维上互相混合。注意 CSS 里没有 mesh-gradient 这个属性，都是叠出来的。

• 和「网格背景（grid 线）」的区别

  网格背景是重复的等距线条，是规则图案；渐变网格是色场，没有线条，颜色之间连续过渡。中文名字里的「网格」指色控点的连线，不是画格子。

• 和「毛玻璃」的区别

  毛玻璃是把背后已有的内容糊掉；渐变网格是自己画出一片颜色。两者常一起用（网格背景 + 玻璃面板），但一个负责背景，一个负责面板。

  容易混的去看「毛玻璃」

容易踩的坑

• radial-gradient 的透明端直接写 transparent，在部分浏览器会和黑混出灰边，要写同一个颜色的 rgba(...,0)
• 色标停到 100% 会露出硬边，提前在 50%–70% 结束，色斑才会自然融合
• 叠超过 7–8 层背景重绘会变慢，再叠加 filter: blur 更明显，4–6 层够用
• 给整层加 blur 时要把它 scale 放大到 1.2 以上，否则元素边缘会透出模糊的透明边
• 纯 CSS 渐变在宽色域显示器上容易出现色带，叠一层 3%–8% 的颗粒噪点能压掉
• 色相旋转用的是 filter: hue-rotate，它作用在整层上，别把文字也放进这一层

无障碍降级

静态的渐变网格不需要降级；如果让色斑缓慢缩放漂移，prefers-reduced-motion: reduce 下暂停动画，固定在一个构图上。

关键词

• radial-gradient
• layered backgrounds
• transparent color stops
• filter: blur()
• hue-rotate()
• mesh gradient
• diffuse gradient

参考

• MDN · radial-gradient()
• MDN · filter

相关展品

• V-04颗粒噪点Grain Noise
• V-06渐变描边Gradient Border
• V-01毛玻璃Frosted Glass