liquid-glass

Liquid Glass

Apple 的 Liquid Glass（iOS 26 / macOS 26）不只是简单使用 backdrop-filter: blur()，而是通过 SVG feDisplacementMap 模拟光线穿过弯曲玻璃时的折射。背景内容会在元素边缘发生物理扭曲，仿佛透过真实玻璃观看。

与玻璃拟态的区别

玻璃拟态 = 仅有磨砂模糊。Liquid Glass = 磨砂模糊 + 边缘折射（背景在边框附近发生扭曲）。这项技术使用 backdrop-filter: url(#svg-filter)——只有 Chrome/Chromium 支持完整效果；Firefox/Safari 会平滑降级为模糊效果。

四层构成

每个 Liquid Glass 元素都由四层叠加而成：

<div class="glass">                    
  <div class="glass__refract"></div>   
  <div class="glass__tint"></div>      
  <div class="glass__specular"></div>  
  <div class="glass__content">...</div>
</div>

.glass { position: relative; border-radius: 28px; overflow: hidden; }

/* Layer 0: Refraction (Chrome only for SVG filter URL) */
.glass__refract {
  position: absolute; inset: 0; border-radius: inherit;
  backdrop-filter: blur(12px) url(#liquid-glass) brightness(1.05) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) url(#liquid-glass) brightness(1.05) saturate(1.3);
  isolation: isolate;   /* REQUIRED — creates stacking context */
}

/* Layer 1: Glass tint */
.glass__tint {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255, 255, 255, 0.18);
}

/* Layer 2: Specular rim (top edge bright, bottom edge subtle) */
.glass__specular {
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(255,255,255,0.15);
}

/* Layer 3: Content */
.glass__content { position: relative; z-index: 10; }

SVG 滤镜（折射引擎）

在 DOM 任意位置的隐藏 <svg> 中定义一次：

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"
     style="position:absolute;overflow:hidden">
  <defs>
    <filter id="liquid-glass" color-interpolation-filters="sRGB"
            x="0%" y="0%" width="100%" height="100%">
      <feImage result="dispMap"
        x="0" y="0" width="ELEMENT_WIDTH" height="ELEMENT_HEIGHT"
        preserveAspectRatio="none"
        href="DISPLACEMENT_MAP_DATA_URI"
      />
      <feDisplacementMap
        in="SourceGraphic" in2="dispMap"
        scale="-35"
        xChannelSelector="R" yChannelSelector="G"
      />
    </filter>
  </defs>
</svg>

scale 是关键参数：负值 = 放大（Apple 风格），正值 = 鱼眼效果。

位移贴图——关键概念

位移贴图是一张图像，其中颜色 = 位移指令：

• R 通道 = 水平位移（128 = 中性，255 = 最右，0 = 最左）
• G 通道 = 垂直位移（128 = 中性，255 = 最下，0 = 最上）
• scale 用于放大位移：actual_px = (channel/255 - 0.5) × scale

边缘像素的 R/G 值不是中性值 → 从略微靠内的位置采样内容 → 看起来就像发生了玻璃折射。中心像素的 R=G=128 → 无位移 → 形成平整的玻璃表面。

工作流

路径 A——复制预先制作的模板（最快） assets/templates/ 中提供可直接使用的文件：

• glass-button.html——300×56 的胶囊形 CTA 按钮，配有鲜艳的演示背景
• glass-card.html——360×220 的卡片，具有完整的色差效果
• glass-pill-navbar.html——Apple 风格的三项标签栏，带有嵌套的激活状态
• LiquidGlass.tsx——React/TypeScript 组件（React 18+，无外部依赖）

在 Chrome 中打开任意 HTML 文件，即可查看完整效果。

路径 B——生成自定义位移贴图 适用于尺寸不常见或需要物理精确折射效果的元素：

python scripts/generate-displacement-map.py \
  --width 400 --height 80 --radius 40 \
  --mode sdf --output map.png --datauri

将打印出的 data URI 复制到 <feImage href="..."> 中。有两种模式：sdf（速度快，效果出色）和 snell（基于斯涅尔定律，符合物理规律）。

关键参数

参数	作用	范围
feDisplacementMap 上的 scale	折射强度。负值 = 放大。	-20（轻微）到 -50（明显）
backdrop-filter 中的 blur	磨砂玻璃厚度	8–20px
tint layer background	玻璃颜色 + 不透明度	rgba(255,255,255, 0.12–0.25)
specular top box-shadow alpha	边缘高光亮度	0.5–0.9

浏览器兼容性

**完整效果：**仅支持 Chrome 76+ / Edge 79+（Chromium）。 **降级效果（仅模糊）：**所有现代浏览器——Firefox/Safari 会自动忽略 url() 部分，保留模糊效果。

/* No @supports needed — automatic graceful degradation */
backdrop-filter: blur(12px) url(#liquid-glass) brightness(1.05) saturate(1.3);
/* Firefox/Safari see: blur(12px) brightness(1.05) saturate(1.3) ✓ */
/* Chrome sees full pipeline ✓ */

色差（进阶）

运行三次 feDisplacementMap（R/G/B），每次使用略有差异的 scale 值（±5–7%），通过 feColorMatrix 分离各个通道，再用 feBlend mode="screen" 合并。完整可用示例请参阅 assets/templates/glass-card.html。

了解更多

• 物理原理深入解析（斯涅尔定律、SDF、表面函数、注意事项）：references/physics.md
• SVG 滤镜原语 A–Z、管线、浏览器兼容性、性能：references/filter-pipeline.md
• 生成器脚本用法：python scripts/generate-displacement-map.py --help