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 では、ぼかしのみが適用されます。

4 層構成

すべての Liquid Glass 要素は、4 つのレイヤーを重ねて構成します。

<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 風の 3 項目タブバー
• LiquidGlass.tsx — React/TypeScript コンポーネント（React 18 以降、外部依存関係なし）

HTML ファイルを Chrome で開くと、完全な効果を確認できます。

パス B — カスタム変位マップを生成する 標準外の寸法や、物理的に正確な屈折を必要とする要素の場合：

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

出力されたデータ URI を <feImage href="..."> にコピーします。モードは sdf（高速で、優れた結果が得られます）と snell（スネルの法則に基づく物理的に正確なモード）の 2 種類です。

主要なパラメーター

パラメーター	機能	範囲
feDisplacementMap の scale	屈折の強さです。負の値は拡大します。	-20（控えめ）～ -50（強め）
backdrop-filter の blur	すりガラスの厚み	8–20px
tint レイヤーの 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 を 3 回（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