🧊毛玻璃效果生成器

怎么做毛玻璃卡片

1. 先选一个色彩丰富的背景 —— 背后有内容，玻璃质感才出得来。
2. 先调模糊和填充不透明度，再用饱和度做出通透的磨砂感，最后加一圈细亮描边和柔和阴影，把卡片从页面上“浮”起来。
3. 复制 CSS。输出同时包含带前缀和不带前缀的 backdrop-filter，以及 @supports 降级方案：不支持时自动提高填充不透明度。

常见问题

为什么玻璃看起来发灰、很平？

通常是模糊太重、饱和度太低，或者背景几乎是纯色。把饱和度提到 150–200%，模糊保持在 10–20px，背后放渐变或照片。

backdrop-filter 性能开销大吗？

它会新建合成层并在每次绘制时重新模糊，所以不要给它做动画，不要叠很多层玻璃面板，更不要在移动端给整页滚动容器加。

可读性怎么办？

玻璃会降低对比度。请拿文字分别对照背景最亮和最暗的位置检查，必要时提高填充不透明度；绝对不要在玻璃上放灰色小字。