CSSで実装したLiquid Glass

(atlaspuplabs.com)

20 ポイント投稿者 GN⁺ 2025-07-01 | 3件のコメント | WhatsAppで共有

AppleがWWDC25で公開したLiquid Glassデザイン言語の中核的な効果を、CSSとSVGフィルタの組み合わせで再現する方法
Specular Highlights、Blur、Color Filter、Refraction、Edge/Ripple Distortion、Chromatic Aberration など、実際のガラス素材を模倣する多様なレイヤーを段階的にCSS/SVGで実装
主な効果の実装には backdrop-filter、box-shadow、SVG DisplacementMap、Turbulence、ColorMatrix、Offset、Blend などの高度なCSS・SVG技術を使用
ブラウザ互換性はChrome中心で、Safari/FirefoxではSVGフィルタが動作せず、Blur・Shadowのみ適用される
効果が複雑になるほど GPU使用量が大きく、UI全体に多用すると性能低下 が発生しうるため、重要な領域を中心に使うことを推奨

Liquid Glassとは？

Appleの最新デザイン言語で、実際のガラスのような 光の反射・屈折、色の変化、立体感 を模倣した高度なグラフィック効果を志向している
UI要素に奥行きと躍動感を加えるのに活用され、視覚的に滑らかで物理的な触感を連想させる特徴がある

効果の主なレイヤーと実装方法

1. Specular Highlights（ガラスの反射光）

ガラスの縁にハイライトを加え、奥行きと立体感を強調する

CSSの inset box-shadow を複数重ねて適用し、角度ごとに光が反射する感覚を表現

box-shadow:  
    inset 10px 10px 20px rgba(153, 192, 255, 0.1),  
    inset 2px 2px 5px rgba(195, 218, 255, 0.2),  
    inset -10px -10px 20px rgba(229, 253, 190, 0.1),  
    inset -2px -2px 30px rgba(247, 255, 226, 0.2);

[Fresnel Effect] を参考に、光の反射強度を自然に調整する

2. Blur（背景ぼかし）

ガラスの背後にあるコンテンツにだけぼかしを適用するため、backdrop-filter: blur(20px); を使用
実際の要素自体ではなく、背景コンテンツにのみ効果が適用される

3. Color Filter（色の強調）

contrast(80%) saturate(120%) などのbackdrop-filterを追加で適用し、ガラスの背後にあるコンテンツの 彩度を上げ、コントラストを下げる ことで鮮やかな色味を実現
```
backdrop-filter: blur(20px) contrast(80%) saturate(120%);  
```

4. 屈折（Refraction）シミュレーション

ガラスの曲面によって背景が歪んで見える 屈折効果 は、CSS単独では実装に限界があるため、SVGフィルタと組み合わせて実装
Displacement Map: SVGのgradientを活用し、縁ではピクセルを圧縮し中央部では引き伸ばす歪みマップ（Identity Map）を生成
- 例のSVGの赤/青グラデーションでX/Y方向のピクセル移動量を定義
- グラデーションのrampを調整して、縁の圧縮・中央の拡張パターンを設計
- SVGをData URLに変換して feImage で読み込み、feDisplacementMap で座標変形に活用
Ripple Distortion: feTurbulence（ノイズテクスチャ）と追加のfeDisplacementMapの組み合わせで、ガラス表面の微細な波まで描写
Chromatic Aberration（色収差）: feColorMatrix、feOffset、feBlend の組み合わせでRGB各チャネルを分離・オフセットしてから合成し、実際のガラスで観察される光の分散効果を模倣

CSS/SVG効果の適用方法

SVG filterを定義した後、filter: url(#filterId); を使ってDOM要素に適用
すべての効果を組み合わせたフィルタチェーンにより、実際のガラスパネルのような質感・光の歪み・色変調を同時に再現できる

互換性と性能上の注意点

SVG displacement filterはChromeでのみ正常にサポート。Safari、Firefoxなどでは効果が制限される（Blur/Shadowのみ残る）
Glass要素が多い場合やアニメーションを適用する場合、GPU負荷が大きく、レンダリング性能の低下 が発生する
現実的には Hero/Feature領域 など、強調が必要な一部のUIにだけ使うのが適している

参考とクレジット

この実装方法は Smashing Magazine の "A Deep Dive Into The Wonderful World Of SVG Displacement Filtering" と Apple Liquid Glass公式ドキュメントに基づいている
SVG displacement、CSS backdrop-filter、box-shadow など最新のWeb技術を組み合わせて活用することが核心である

3件のコメント

geek12356 2025-07-01

この方が実装されたもののほうが、より自然な感じがしますね
https://v0.dev/chat/dynamic-frame-layout-1VUCCecq7Uy

zabefofoon 2025-08-01

これはSafariでは適用されないですね

bobross0 2025-07-01

Webで実装するには、まだやっぱり少し違和感がありますね（笑）