毛玻璃Backdrop Blur
视觉效果与操作状态模糊浮层背后的画面形成材质感
先知道
毛玻璃效果会模糊元素后面的内容，常用于导航和浮层。前景需要一定透明度才能看到效果；同时要保证文字对比度、控制渲染开销，并准备不支持滤镜时的实色背景。
山居民宿 · 云顶
海拔 1,200 米，推开窗就是云海。
backdrop-filter: blur(12px)什么时候用
- 吸顶 顶部导航栏 Navbar：内容从底下滚过，若隐若现导航 · 毛玻璃
- 浮层与对话框：和下层保持联系，又分得清前后对话框 · 毛玻璃浮层
- 配图区的信息卡：风景图上盖一张玻璃卡
- 配半透明底色：rgba 白 / 黑加 blur，一对搭档rgba 半透明底色 + blur，一对搭档
什么时候不用
- 背景写不透明纯色：blur 完全没有效果背景写了纯白，blur 白写了不透明背景 = 毛玻璃完全不生效
- 大面积内容罩重度模糊：掉帧还看不清整页内容罩一层重模糊大面积重度模糊，又卡又看不清
- 底色太透、模糊太轻：正文和背景糊成一团底色太透、模糊太轻，正文和背景糊在一起，读起来费劲。文字可读性必须保住
- 移动端层层叠模糊：低端机直接卡成 PPT移动端一层叠一层模糊，低端机狂掉帧
组成结构 · Anatomy
+blur(12px)+rgba 白 55%=
1背景内容Backdrop元素身后的东西：图片、渐变、滚动的页面
2模糊blur()backdrop-filter 的模糊半径，越大越看不清
3半透明底色rgba Tint没有它 blur 不生效，还顺手托住文字对比度
4毛玻璃成品Frosted Card三者叠加的最终效果：若隐若现、层次分明
常见变体 · Variants
浅色玻璃Light
浅色玻璃
背景较亮、仍能保持文字对比度时
深色玻璃Dark
深色玻璃
深色底图或夜间模式界面
强模糊Strong
强模糊
弹窗背后要更强隔离感
典型使用场景
吸顶毛玻璃导航
雨后的大理古城
3.2 万阅读 · 486 收藏
环洱海骑行一日路线
1.8 万阅读 · 302 收藏
旅记
首页
目的地
我的
风景图上的玻璃卡片
山居民宿 · 云顶
海拔 1,200 米，推开窗就是云海
¥ 688 / 晚
可订
对话框与浮层
退出前保存修改？
「首页改版 v2」还有未保存的改动
深色模式玻璃面板
不才 · 我的三体
⏮▶⏭