玻璃拟态

什么时候用

• 登录页、定价卡、数据卡想显得轻透精致，又不想整页铺实心色块
• 面板压在彩色渐变或照片上，希望底下的颜色透一点上来
• 浮层、侧栏要和主内容拉开层级，同时不切断和背景的联系

适用场景：卡片 / 页面 / 导航

推荐取值

模糊半径

10–20px

面板底色

linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06))

描边

1px solid rgba(255,255,255,0.30)

投影

0 8px 32px rgba(0,0,0,0.30)

内高光

inset 0 1px 0 rgba(255,255,255,0.50)

圆角

12–24px

别搞混

• 和「毛玻璃」的区别

  毛玻璃只说「背后被模糊」这一件事（backdrop-filter: blur）；玻璃拟态是一整套外观：模糊 + 半透明白色斜向渐变 + 1px 亮描边 + inset 顶部高光 + 外投影，而且几乎都压在彩色背景上。只加一个 blur 不叫玻璃拟态。

  容易混的去看「毛玻璃」

• 和「半透明卡片」的区别

  半透明只是把底色设成 rgba，边缘是平的；玻璃拟态的边界靠那圈亮描边勾出来，高光和投影一起把面板从背景里托起来。

容易踩的坑

• 必须压在彩色渐变或照片上；纯色背景加 backdrop-filter 几乎看不出变化
• 亮描边和 inset 高光是玻璃感的命根子，省掉就只剩一块半透明矩形
• 面板上的文字对比度会随背景变色：深色背景用白字加一点 text-shadow，别指望浅色底能托住黑字
• backdrop-filter 每次都要重新合成背景，一屏十几块玻璃会明显掉帧，长列表项里不要用
• Safari 要写 -webkit-backdrop-filter，并给不支持的浏览器留一个够不透明的兜底色

无障碍降级

玻璃拟态是静态观感，本身不需要降级；如果给它加了入场或悬浮位移，prefers-reduced-motion: reduce 下直接呈现最终状态，只留静态的玻璃层。

关键词

• glassmorphism
• backdrop-filter
• translucent panel
• 1px highlight border
• inset box-shadow
• saturate(180%)

参考

• MDN · backdrop-filter
• MDN · box-shadow

相关展品

• V-01毛玻璃Frosted Glass
• V-06渐变描边Gradient Border
• V-05光晕聚光Spotlight Glow