Liquid Glass / Playground

左侧舞台里那一块玻璃可以 拖动。右侧调每一层 primitive 的强度，或一键应用 Apple 的 三个材质预设，或加载 四个 iOS 26 经典构图。打开解构模式，可以并排看见每一层 primitive 单独的贡献。

Home · Search · Library

↕ 拖动玻璃 · 当前场景：Floating Tab Bar

场景预设

对照代码

CSS · 当前舞台等价于
.glass {
  /* 1. Backdrop blur + 2. Vibrancy */
  backdrop-filter: blur(22px) saturate(1.80) brightness(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(1.80);
  /* 3. Edge refraction (Chrome/Firefox) — dynamic SVG */
  filter: url(#lg-displace);  /* feDisplacementMap scale=14 */
  /* 4. Specular edge — dual-peak rim (UL + BR) */
  /* 5. Tint */
  background-color: rgba(255,255,255,0.18);
  border-radius: 9999px;
}
SwiftUI · 最近的 API 表达
// SwiftUI · iOS 26 / macOS Tahoe
SomeView()
    .glassEffect(.regular)
    .clipShape(.capsule)
// 注意：blur / saturate / displace / edge 都不暴露给开发者，
// 由系统根据材质类型自动决定。

5 层 primitive · 各自在做什么

  1. 01
    Backdrop Blur

    把背景内容做高斯模糊，是 frosted glass 自 Vista Aero 起的看家本领。Liquid Glass 在 blur 之上又叠了四层。

    CSS: backdrop-filter: blur() · SwiftUI: .background(.ultraThinMaterial)
  2. 02
    Vibrancy (Saturate + Brightness)

    在 blur 之后把背景的彩度推到 1.8×，让透出的色彩比原图更艳。Apple 称之为 vibrancy——这是 Liquid Glass "活" 的关键。

    CSS: backdrop-filter: saturate(1.8) brightness(1.05) · SwiftUI: 隐含在 .glassEffect()
  3. 03
    Edge Refraction

    玻璃边缘像凸透镜一样折射背景。Apple 端是实时合成的折射（具体 GPU 实现官方未公开，"法线贴图"等说法属推测）；web 上我们用 SVG feDisplacementMap 近似——视觉上的弯曲是对的，但物理光路不是。

    CSS: filter: url(#lg-displace) · SwiftUI: 隐含；不暴露给开发者
  4. 04
    Specular Edge

    玻璃边缘的高光线——模拟一束环境光从某个角度打在玻璃边缘的反射。真机上这个高光会随设备 motion 移动，web 上是静态的。

    CSS: box-shadow inset + border-image · SwiftUI: 隐含
  5. 05
    Tint

    一层半透明的彩色覆盖。.regular 默认是白色 18% 透明度（轻微"加白"让玻璃可见），.clear 几乎没有，.tinted 替换为品牌色。

    CSS: background-color: rgba() · SwiftUI: .glassEffect(.regular.tint(.color))

Web 还原不了的部分（诚实声明）

  • 实时环境光采样：Apple 在 GPU 上对玻璃周围的像素做 sampling + tone-mapping 然后做物理折射，web 上我们只能用 SVG feDisplacementMap 的 noise displacement 假装。视觉接近，光路不真。
  • 跨元素流体合并（GlassEffectContainer）：iOS 26 控制中心里两块磁贴靠近会像水银一样合并。CSS 有 goo 滤镜可以模拟，但和 Apple 的 metal shader 不是一回事。
  • Motion-coupled refraction：在真机上倾斜手机时，折射轴会跟着设备 gyroscope 移动；web 上没有等价 API。
  • Safari 的 backdrop-filter: url(#…)：Safari 不支持把 SVG filter 链进 backdrop-filter，所以在 Safari 里 displace 这层会自动 fallback 为只有 blur+saturate。Chrome / Firefox 显示完整 5 层。