# 玻璃拟态（Glassmorphism）

镜语 · 版式与界面 / 材质与质感

- 别名：毛玻璃界面、磨砂玻璃、毛玻璃卡片、Frosted Glass UI
- 口语：「半透明的磨砂玻璃卡片」「背后的颜色模糊地透出来」「像隔着浴室玻璃看」
- 一句话：半透明磨砂卡片浮在彩色背景上，后面的颜色被模糊透出
- 是什么：玻璃拟态让卡片像一块半透明磨砂玻璃：背景模糊透出、表面带一层白色半透明、边缘有一道细亮边。它依赖后面有颜色丰富的背景，Windows Fluent 的 Acrylic、macOS 的毛玻璃侧栏都属于同一思路
- 缺了就不像：半透明磨砂卡片；背景模糊透出；彩色背景
- 加了更像：1px 白色细亮边；柔和大投影；多层玻璃叠放
- 适合用在：彩色背景或照片上的浮层：音乐播放器、天气卡片、登录框；视频片头或作品集首屏，营造通透的科技感；需要让叠加层和背景保持联系的场景，比如地图上的信息卡
- 看哪里：看卡片后面彩色光斑被模糊后透出来，卡片四周有一道 1px 的白色半透明细边，像玻璃的切面。把鼠标移到卡片上，背后光斑会跟随移动，透出的颜色随之变化
- 注意：背景是纯色时就没有玻璃感；背景太花又会让文字难读，需要加深遮罩或提高模糊；backdrop-filter 模糊有性能成本，大面积多层叠加在低端设备上会卡
- 描述示例：做一个玻璃拟态风格（Glassmorphism / 毛玻璃）的个人主页卡片：背景是深蓝紫底上几团饱和的粉、橙、青色大光斑；卡片为白色 15–25% 透明度，backdrop-filter 背景模糊 20px 左右，四周 1px 白色 30% 半透明细边，大圆角 24px，柔和的大范围暗投影；文字白色，次要文字白色 70%；按钮也是半透明玻璃小块，悬停时更亮；整体通透、轻盈
- 易混：
  - [液态玻璃](https://idea.ameng.dev/terms/liquid-glass.md)：玻璃拟态只是模糊加半透明；液态玻璃还会在边缘折射、带流动高光，并随内容变色
  - [高斯模糊](https://idea.ameng.dev/terms/gaussian-blur.md)：高斯模糊是一种图像处理；玻璃拟态是把它只用在卡片背后，并配合透明度和细边
- 相关：[弥散渐变](https://idea.ameng.dev/terms/mesh-gradient.md)、[暗色界面](https://idea.ameng.dev/terms/dark-ui.md)、[Y2K 网页](https://idea.ameng.dev/terms/y2k-web.md)

## 来源与延伸阅读

- [NN/g · Glassmorphism](https://www.nngroup.com/articles/glassmorphism/)
- [MDN · backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)

网页版（含演示）：https://idea.ameng.dev/terms/glassmorphism