玻璃拟态Glassmorphism

核心特征

• 面板半透明，透出并模糊身后的背景
• 背景是高饱和的渐变或光斑，玻璃本身几乎无色
• 面板带 1px 半透明白色细边，模拟玻璃边缘反光
• 柔和的大范围投影让面板浮起
• 文字多为白色，层级靠透明度区分

色板与字体

英文

Inter（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

真实项目常用 SF Pro、Inter、Manrope 这类干净的无衬线字体，字重偏中粗，保证在模糊背景上可读。

起源与代表作

年代：2020 年流行

磨砂玻璃效果早在 2007 年 Windows Vista 的 Aero 和 2013 年 iOS 7 的控制中心里就已出现。2020 年 macOS Big Sur 大量使用半透明材质，Michal Malewicz 撰文把这种风格命名为 Glassmorphism，随后在 Dribbble 和落地页设计中流行。CSS 的 backdrop-filter 在主流浏览器普及后，它成为网页上实现成本很低的风格。2025 年苹果推出的液态玻璃（Liquid Glass）可以看作它的进化版。

AI 设计提示词 · Prompt

玻璃拟态（Glassmorphism）风格界面：页面背景为深靛色 #1E1B4B，上面叠三个大范围径向渐变光斑（粉 #F472B6、天蓝 #38BDF8、紫 #A78BFA），光斑边缘柔和。导航栏、卡片和输入框都是磨砂玻璃面板：背景 rgba(255,255,255,0.14)，backdrop-filter: blur(16px) saturate(160%)，1px rgba(255,255,255,0.28) 细边框，圆角 18px，投影 0 8px 32px rgba(15,10,60,0.25)。文字白色，次要文字 72% 透明度白色。主按钮白底深靛字，次按钮为半透明玻璃。按背景最亮处检查玻璃上文字的对比度，不足时降低透明度或加深背景。

A Glassmorphism interface: deep indigo page background #1E1B4B with three large, softly blended radial gradient blobs (pink #F472B6, sky blue #38BDF8, violet #A78BFA). The navbar, cards and inputs are frosted glass panels: background rgba(255,255,255,0.14), backdrop-filter: blur(16px) saturate(160%), a 1px rgba(255,255,255,0.28) border, 18px corner radius and a 0 8px 32px rgba(15,10,60,0.25) shadow. Text is white, secondary text is white at 72% opacity. The primary button is white with indigo text; the secondary button is translucent glass. Check text contrast against the brightest part of the background and reduce transparency or darken the background where needed.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #1e1b4b;
  --ds-glass: rgba(255, 255, 255, 0.14);
  --ds-glass-border: rgba(255, 255, 255, 0.28);
  --ds-blur: blur(16px) saturate(160%);
  --ds-text: #ffffff;
  --ds-muted: rgba(255, 255, 255, 0.72);
  --ds-radius: 18px;
  --ds-shadow: 0 8px 32px rgba(15, 10, 60, 0.25);
}

适合与不适合

和相近风格的区别

• 新拟态：玻璃拟态靠半透明和背景模糊，需要色彩丰富的背景才成立；新拟态是不透明的同色底板，靠双向阴影做出凸起与凹陷。

常见踩坑

• 背景光斑经过的地方文字对比度会变化，要按最亮的位置检查白字对比度，必要时给面板加一层深色底
• backdrop-filter 很耗 GPU，大面积、多层叠加或在滚动容器里使用会掉帧；同屏玻璃面板控制在 3–4 块以内
• Safari 18 以前需要 -webkit-backdrop-filter 前缀，不支持的环境要准备不透明的降级背景色
• 玻璃面板放在纯色背景上看不出效果，背景必须有颜色变化或图片

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题