毛玻璃
Frosted Glass
面板背后的内容被真的模糊掉，像隔着一层磨砂玻璃看过去。
- 又叫：
- 磨砂玻璃
- 磨砂
- 毛玻璃效果
- backdrop blur
- backdrop-filter
- glass blur
- 展厅
- 视觉质感
- 形态
- 固定舞台
- 播放
- 常驻循环
- 关键词
- 纯 CSS / 新 CSS 特性 / 滤镜与混合 / 重绘开销 / 可以直接用
参数工作台
复制给 AI
随参数实时更新做一个毛玻璃（Frosted Glass）面板：用 backdrop-filter: blur(12px) saturate(115%) 把面板背后的内容模糊掉，面板底色 rgba(255,255,255,0.08)，圆角 14px，1px rgba(255,255,255,0.18) 描边勾出玻璃边缘。面板必须叠在有内容的背景上（照片或彩色渐变），不要用半透明纯色糊弄，那不是毛玻璃。
frosted glass panel, backdrop-filter: blur(12px) saturate(115%), -webkit-backdrop-filter fallback, background: rgba(255,255,255,0.08), border: 1px solid rgba(255,255,255,0.18), border-radius: 14px, must sit over visible content behind
https://publieople.github.io/design-museum/entry/frosted-glass/?stage=photo
链接带着你调好的参数
什么时候用
- 导航栏、浮层压在滚动内容或照片上，既要有层次又要透出底下
- 卡片叠在图片或彩色背景上，希望它属于这个画面而不是贴上去
- 需要让人一眼看出「这块浮在上面」，又不想用实心色块把背景挡死
适用场景：卡片 / 导航 / 页面
推荐取值
- 模糊半径
- 8–16px
- 饱和度
- 140%–200%
- 面板底色
- rgba(255,255,255,0.06–0.12)
- 描边
- 1px rgba(255,255,255,0.18)
别搞混
和「半透明」的区别
半透明只是让面板变淡，背后内容依然清晰；毛玻璃会把背后内容真的糊掉。只调 opacity 或 rgba 做不出毛玻璃。
和「模糊滤镜 blur()」的区别
filter: blur() 模糊的是元素自己（连它的文字一起糊）；backdrop-filter: blur() 模糊的是它背后的东西，元素自身内容保持清晰。
容易踩的坑
- 背后必须有内容：纯色背景上加 backdrop-filter 看不出任何变化
- 父级带 overflow: hidden 或 transform 时，部分浏览器会失效或裁切异常
- 模糊半径超过 20px 就会糊成一片，文字对比度下降，8–16px 通常够用
- Safari 需要 -webkit-backdrop-filter 前缀，且要给不支持的浏览器留可读底色
无障碍降级
毛玻璃是静态效果，本身不需要降级；如果配合入场动画，在 prefers-reduced-motion 下应直接呈现最终状态。
关键词
- backdrop-filter
- blur()
- saturate()
- frosted glass
- backdrop blur
- translucent panel