用 backdrop-filter 造一扇磨砂窗

backdrop-filter 只有一行，但想让它看起来像真的玻璃，需要额外做五件事。

一、模糊半径不是越大越好

刚上手时容易把半径拉到 40px、60px，结果整块区域变成一团模糊的色块，完全看不出背后的形状。

真实毛玻璃的模糊是有「颗粒感」的——你能隐约看到背后物体的轮廓。所以在桌面端我们一般停在 24–32px，移动端再降 4–8px。

二、加饱和度，别只加模糊

光穿过玻璃时会被「提纯」。纯模糊会让颜色发灰，加上 saturate() 能立刻找回那种透亮感：

.glass {
  backdrop-filter: blur(28px) saturate(180%);
}

180% 是个好起点。低于 140% 变化不明显，高于 220% 会开始出现廉价的高饱和。

三、亮度也需要微调

浅色主题下建议再加一点 brightness(1.08)，让玻璃比背景稍微亮一点点——这一丁点亮度差，是玻璃「浮起来」的关键。深色主题反过来，用 brightness(0.92)。

四、噪点是最后的 10%

数字模糊是绝对均匀的，而真实玻璃的表面有微小的不均匀。这就是为什么纯 CSS 做的毛玻璃总有一种「太干净」的塑料感。

解决方案是叠一层极淡的噪点：

.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,...");
  opacity: .035;
  pointer-events: none;
}

不透明度控制在 3%–5%，再多就变成「脏」而不是「质感」了。

五、内阴影与描边

前面那篇文章里聊过，这里只补一句：描边的颜色要用白色，而不是灰色。

border: 1px solid rgba(255, 255, 255, .75);

灰色描边会让玻璃看起来像一块塑料板。

---

性能陷阱清单

做完好看之后，记得回头测性能。这几个是我们在真实项目里遇到过的：

1. 滚动列表里的玻璃卡片。这是最贵的场景，因为滚动时每一帧都在重新采样。如果列表超过 20 项，考虑把卡片改成非玻璃的实色，只在 hover 时变玻璃。
2. 玻璃套玻璃。视觉上通常也不好看，性能上更是灾难。
3. 动画里的 blur。给模糊半径做过渡动画会让浏览器每帧重新计算，改成过渡 opacity 或 transform。
4. 低端安卓机。backdrop-filter 在中低端安卓上掉帧非常明显。用 @supports 做降级：

@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(255, 255, 255, .92); }
}

降级成接近实色，至少保证了可读性——这比「效果没了但文字看不清」要好得多。