玻璃拟态（Glassmorphism）是近年来备受推崇的 UI 设计趋势，它通过模糊、透明和细腻的边框，模拟出真实玻璃的通透质感，让界面呈现出层次分明的空间深度。这种风格在 macOS、iOS 以及各类现代 Web 应用中随处可见。本文将从核心属性出发，带你打造一套完整的玻璃质感界面。
backdrop-filter 基础
backdrop-filter 是玻璃拟态的灵魂。它对元素背后的内容应用滤镜效果，从而产生磨砂玻璃的视觉感受：
1
2
3
4
5
6
| .glass-panel {
backdrop-filter: blur(34px) saturate(180%);
-webkit-backdrop-filter: blur(34px) saturate(180%);
background: rgba(255, 255, 255, 0.55);
border-radius: 16px;
}
|
blur 控制模糊半径，saturate 提升饱和度让色彩更通透。记得同时写上 -webkit- 前缀以兼容 Safari。
色彩与透明度
玻璃效果的精髓在于「半透明背景 + 模糊」的组合。背景色通常使用 rgba 设置在 0.4 ~ 0.7 之间：太透明会失去玻璃感，太不透明又像普通卡片。深色模式下，可将背景改为 rgba(30, 30, 30, 0.5)，并搭配浅色文字。
边框与阴影
真实的玻璃边缘有微妙的高光，单靠背景色无法表现。需要叠加边框与多层阴影：
1
2
3
4
5
6
| .glass-panel {
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
|
inset 高光模拟顶部受光，外层阴影营造悬浮感，两者缺一不可。
实际应用案例
下面是一个 macOS 风格的毛玻璃通知面板：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .notification {
position: fixed;
top: 24px;
right: 24px;
width: 320px;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(34px) saturate(180%);
-webkit-backdrop-filter: blur(34px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 14px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
color: #1d1d1f;
}
|
将其悬浮于彩色背景之上，即可看到通透而精致的磨砂质感。
兼容性与降级
backdrop-filter 在部分旧浏览器中不被支持。推荐使用 @supports 进行渐进增强：检测到不支持时，退回为不透明背景，保证可读性。
1
2
3
4
5
6
7
8
9
| .glass-panel {
background: #f5f5f7;
}
@supports (backdrop-filter: blur(10px)) {
.glass-panel {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(34px) saturate(180%);
}
}
|
如此一来，新浏览器享受玻璃质感，旧浏览器也不会出现透明文字叠在杂乱背景上的可读性问题。