毛玻璃效果 (Glass Morphism)

概述

一种通过 backdrop-filter 实现半透明磨砂玻璃效果并配合饱和度增强的 视觉层次技术。

其核心特征是：

使用 blur() 模糊背后内容 + saturate() 补偿模糊导致的色彩丢失；
提供两级强度：glass（20px blur, 75% 不透明度）和 glass-strong（40px blur, 88% 不透明度）；
饱和度增强（1.4x-1.6x）借鉴 Apple 设计语言，让透过玻璃看到的内容依然鲜艳；
通常配套白色半透明边框和深色暖调阴影，定义面板边缘和悬浮感。

两级玻璃系统

/* 轻度毛玻璃 */
.glass {
  background: hsl(40 30% 99% / 0.75);          /* 75% 不透明度 */
  backdrop-filter: blur(20px) saturate(1.4);    /* 模糊 20px + 饱和度 140% */
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

/* 强毛玻璃 */
.glass-strong {
  background: hsl(40 30% 99% / 0.88);          /* 88% 不透明度 */
  backdrop-filter: blur(40px) saturate(1.6);    /* 模糊 40px + 饱和度 160% */
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
}

关键技巧

1. `saturate()` 饱和度增强

这是从 Apple 设计语言借鉴的手法。blur() 会让背后的颜色变灰变淡，加上 saturate(1.4) 或 saturate(1.6) 可以补偿色彩丢失，让透过玻璃看到的内容依然鲜艳。

2. 背景色的透明度

glass 用 75% 不透明度 — 更透明，适合轻量浮层
glass-strong 用 88% 不透明度 — 更实，适合侧边栏/顶栏等常驻导航

3. `-webkit-` 前缀

Safari 仍然需要 -webkit-backdrop-filter，必须同时写。

各场景的 blur/背景选择

场景模糊不透明度背景色侧边栏/顶栏40px88%暖白 hsl(40 30% 99%)Dialog 面板24px (backdrop-blur-xl)95%bg-card/95Dialog 背景遮罩64px (backdrop-blur-3xl)20%bg-foreground/20命令面板遮罩8px (backdrop-blur-sm)40%bg-black/40项目卡片标签12px (backdrop-blur-md)80%bg-white/80

配套：白色边框 + 深色阴影

毛玻璃面板通常需要：

ring-1 ring-white/[0.12] — 白色半透明外边框，定义边缘
shadow-[var(--shadow-float)] — 深色暖调阴影，制造”悬浮”感

完整示例（浮动侧边栏）

<aside className="fixed left-3 top-3 bottom-3
                  rounded-[1.5rem]
                  glass-strong
                  ring-1 ring-white/[0.12]
                  shadow-[var(--shadow-float)]">

适用场景

浮动导航栏、侧边栏
弹窗/Dialog 面板
命令面板 (Command Palette)
任何需要”悬浮在内容之上”的 UI 层

注意事项

backdrop-filter 在部分 Linux 浏览器上可能不生效，需准备降级方案（纯色背景）
模糊半径越大，性能开销越高；移动端建议控制在 20-40px
动态变化的模糊比静态模糊更耗性能

‍

概述