液态玻璃Liquid Glass

核心特征

• 玻璃更通透，白色填充仅 8%–20% 透明度
• backdrop-filter 模糊半径较小，并提高饱和度
• 边缘用上亮下暗的内高光描出玻璃厚度
• 导航与控件多为胶囊形，圆角很大
• 背景是明亮的多色渐变，透出的颜色很丰富

色板与字体

英文

Inter（自托管）

中文

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

说明

真实项目通常直接使用 SF Pro；非苹果平台可用 Inter 替代，字重取 500–600 以便在玻璃上保持清晰。

起源与代表作

年代：2025 年（苹果 WWDC25 发布）

2025 年 6 月的 WWDC25 上，苹果宣布了名为 Liquid Glass 的新设计语言，并随 iOS 26、iPadOS 26 与 macOS Tahoe 26 等系统推出。它让控件、导航栏和标签栏变成会折射背后内容的透明材质，边缘带有随光线变化的高光。网页上没有系统级的实时折射能力，通常用 backdrop-filter 配合内高光近似；想做到真实折射，需要 SVG 滤镜或 WebGL。

AI 设计提示词 · Prompt

液态玻璃（Liquid Glass）风格界面：页面背景为明亮的多色渐变，由珊瑚橙 #FFB4A2、奶黄 #FFE08A、晴空蓝 #8FD3FF 与淡紫 #C4B5FD 的径向光斑组成。导航栏、卡片与输入框是通透玻璃：背景 rgba(255,255,255,0.18)，backdrop-filter: blur(10px) saturate(180%)，1px rgba(255,255,255,0.35) 细边，内高光 inset 0 1px 0 rgba(255,255,255,0.6) 与 inset 0 -1px 0 rgba(0,0,0,0.08)，投影 0 10px 30px rgba(30,60,120,0.15)。导航与按钮使用胶囊形圆角，卡片圆角 22px。文字使用墨夜蓝 #0B1220，次要文字 #243247，主按钮为系统蓝 #0061D5 白字。不使用厚重阴影与纹理。按背景最亮处检查玻璃上文字对比度，不低于 4.5:1。

A Liquid Glass interface: a bright multi-color gradient page background made of radial blobs in coral #FFB4A2, butter yellow #FFE08A, sky blue #8FD3FF and lavender #C4B5FD. The navbar, cards and inputs are clear glass: background rgba(255,255,255,0.18), backdrop-filter: blur(10px) saturate(180%), a 1px rgba(255,255,255,0.35) border, inner highlights inset 0 1px 0 rgba(255,255,255,0.6) and inset 0 -1px 0 rgba(0,0,0,0.08), and a 0 10px 30px rgba(30,60,120,0.15) shadow. Navigation and buttons use pill-shaped corners; cards use a 22px radius. Text is ink blue #0B1220, secondary text #243247, and the primary button is system blue #0061D5 with white text. No heavy shadows or textures. Check text contrast against the brightest part of the background and keep it at least 4.5:1.

CSS 设计变量

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

:root {
  --ds-bg: #bfe3ff;
  --ds-glass: rgba(255, 255, 255, 0.18);
  --ds-glass-border: rgba(255, 255, 255, 0.35);
  --ds-blur: blur(10px) saturate(180%);
  --ds-text: #0b1220;
  --ds-accent: #0061d5;
  --ds-radius: 22px;
  --ds-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  --ds-shadow: 0 10px 30px rgba(30, 60, 120, 0.15);
}

适合与不适合

和相近风格的区别

• 玻璃拟态：液态玻璃更通透、模糊更小，靠内侧高光与胶囊轮廓表现玻璃的厚度；玻璃拟态是较浓的磨砂面板，靠大半径背景模糊和细白边区分层次。

常见踩坑

• 网页只能用 backdrop-filter 近似，做不到系统级的实时折射；想要真实折射需要 SVG 滤镜或 WebGL，兼容性与性能都要单独评估
• 玻璃更通透意味着文字更依赖身后内容，背景一旦出现亮色光斑对比度就会不足，务必按背景最亮处检查并给文字加底
• backdrop-filter 开销很大，多块玻璃叠加或放在滚动容器里容易掉帧，同屏控制在 3–4 块，并为不支持的环境准备不透明降级背景
• 高光边框写成纯白会在浅色背景上消失，内高光要用半透明白与半透明黑配合，上亮下暗才有厚度

相关 UI 模式

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

常见问题