使用 CSS 实现毛玻璃（Frosted Glass / 磨砂玻璃）模糊背景效果
这是 2024–2026 年非常流行的前端高级视觉效果之一，常用于：
- 模态框 / 抽屉 / 侧边栏的背景
- 卡片悬浮在模糊背景上
- 导航栏 / 工具栏的半透明磨砂感
- 音乐播放器、天气小组件、桌面壁纸风格 UI
当前最主流的实现方式对比（2025–2026）
| 方案 | 核心属性 | 浏览器支持（2025） | 性能 | 真实感 | 推荐指数 | 备注 |
|---|---|---|---|---|---|---|
| 1 | backdrop-filter: blur() | 极好（几乎全覆盖） | 中～高 | ★★★★★ | ★★★★★ | 首选 |
| 2 | filter: blur() + 伪元素 | 完美支持 | 中 | ★★★☆☆ | ★★☆☆☆ | 老项目兼容用 |
| 3 | SVG 滤镜 + feGaussianBlur | 完美支持 | 较低 | ★★★★☆ | ★☆☆☆☆ | 极致兼容用 |
| 4 | canvas / WebGL 实时模糊 | 完美支持 | 较低～中 | ★★★★★ | ★★☆☆☆ | 动态内容才考虑 |
**结论：**99% 的现代项目直接使用 backdrop-filter: blur() 就够了，性能与效果的性价比最高。
方案一：最推荐写法（backdrop-filter）
/* 1. 最经典的毛玻璃卡片 */
.glass-card {
/* 核心三件套 */
background: rgba(255, 255, 255, 0.18); /* 半透明白色 */
backdrop-filter: blur(16px) saturate(180%); /* 模糊 + 饱和度提升 */
-webkit-backdrop-filter: blur(16px) saturate(180%); /* 兼容旧 Safari */
/* 边框（可选，但强烈推荐） */
border: 1px solid rgba(255, 255, 255, 0.25);
/* 圆角（现代感） */
border-radius: 16px;
/* 轻微阴影增加立体感 */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
/* 内容区域建议内边距 */
padding: 2rem;
}
/* 2. 深色模式适配（常用写法） */
@media (prefers-color-scheme: dark) {
.glass-card {
background: rgba(30, 30, 46, 0.4); /* 深色半透明底 */
border: 1px solid rgba(255, 255, 255, 0.08);
}
}
/* 3. 极简版（只模糊不加饱和度） */
.minimal-glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
完整演示 HTML + CSS（可直接复制运行）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>毛玻璃效果演示</title>
<style>
body, html {
margin: 0;
height: 100%;
font-family: system-ui, sans-serif;
}
/* 背景图层（模拟真实场景） */
.bg {
position: fixed;
inset: 0;
background: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600') center/cover no-repeat;
z-index: -2;
}
/* 毛玻璃容器 */
.glass-container {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
box-sizing: border-box;
}
.glass-card {
width: 100%;
max-width: 420px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
padding: 2.5rem;
color: white;
text-align: center;
transition: all 0.3s ease;
}
.glass-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
h1 {
margin: 0 0 1rem;
font-size: 2.2rem;
}
p {
margin: 0 0 1.5rem;
opacity: 0.9;
line-height: 1.6;
}
button {
background: rgba(255, 255, 255, 0.25);
border: none;
border-radius: 999px;
padding: 0.8rem 2rem;
color: white;
font-weight: 600;
cursor: pointer;
backdrop-filter: blur(4px);
transition: all 0.2s;
}
button:hover {
background: rgba(255, 255, 255, 0.35);
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="glass-container">
<div class="glass-card">
<h1>毛玻璃世界</h1>
<p>这是一个使用 backdrop-filter 实现的磨砂玻璃效果，适用于现代浏览器。</p>
<button>点击体验</button>
</div>
</div>
</body>
</html>
常见问题与优化建议
| 问题 | 解决方案 / 注意事项 |
|---|---|
| iOS 低版本 / 旧 Android 不支持 | 降级方案：background: rgba(255,255,255,0.3) + filter: blur(8px) 于伪元素 |
| 模糊内容包含文字时变糊 | 增加 saturate(1.8~2.2) 或 contrast(1.1~1.3) 补偿 |
| 性能卡顿（尤其在手机上） | 减少模糊半径（8～16px 即可）、使用 will-change: transform、避免大面积毛玻璃 |
| 暗黑模式下发灰 | 改用深色半透明底 rgba(30,30,46,0.4~0.6) + 更强的边框对比 |
| 想做'毛玻璃 + 噪点'质感 | 在背景图层叠加轻微噪点纹理（css 或 svg） |
2025–2026 进阶玩法提示
- 结合
@supports (backdrop-filter: blur(1px))做优雅降级 - 用
backdrop-filter: blur(var(--blur, 12px))实现动态调节 - 与
scroll-driven animations结合，做滚动时逐渐变清晰的毛玻璃 - 与
color-mix()一起使用，实现根据主题自动调整透明度