透過リキッドガラスとは、backdrop-filter と SVG の feDisplacementMap を組み合わせ、要素の背後にあるページのピクセルそのものをレンズのように屈折・ぼかしして見せる手法です。背景を焼き込まないため、スクロールで後ろが動くと歪みもそれに追従します。
WebGL方式とCSS方式（本ツール）の違い
「Liquid Glass」をWebで作る方法は大きく2系統あります。用途で使い分けるのがおすすめです。
| 観点 | WebGL版（liquid-glass-generator） | 本ツール（CSS / backdrop-filter） |
|---|---|---|
| 屈折する対象 | canvasに焼き込んだ背景画像 | 背後にある実際のページ（ライブ） |
| スクロール追従 | ×（背景は固定） | ○（Chromium系） |
| 出力コード | <canvas> ＋ JS（ogl） | <a>/<div> ＋ CSS / SVG |
| 得意な用途 | ヒーロー・カードの見せ場 | ヘッダー・フローティングUI |
| ブラウザ | WebGL全般 | 屈折はChromium、他はフロストに劣化 |
使い方（3ステップ）
- 形状（ボタン／ピル／円／カード）とサイズを選ぶ
- 歪み・ぼかし・ティント・縁ハイライトを調整する
- 出力された HTML と CSS をコピーして貼り付ける
よくある質問
ライブ屈折はどのブラウザで表示されますか？
背後ピクセルを歪ませるライブ屈折は Chrome・Edge などChromium系で表示されます。Safari・Firefox は backdrop-filter の url() フィルタに対応していないため、ぼかし＋ティントのフロストガラスに自動で劣化します（レイアウトは崩れません）。
既存のWebGL版「Liquid Glassジェネレーター」と何が違いますか？
WebGL版は背景画像をcanvasに焼き込んで屈折させる方式で、背景が固定されたヒーローやカード向け。本ツールは backdrop-filter で背後の実ページを屈折させるため、スクロールで後ろが動くと歪みも追従し、ヘッダーやフローティングUIに向きます。
背景画像は必要ですか？
不要です。背後にあるページ内容そのものを透過・屈折するため、貼り付け先の背景に自動で追従します。
スマホ（iOS Safari）でも屈折しますか？
iOS Safari は WebKit エンジンのため屈折は出ず、フロスト表示に劣化します。歪みを前提にしない設計がおすすめです。
クリックできる範囲はガラスの形状と一致しますか？
はい。リンクURLを入れると <a> として出力し、clip-path でクリック領域を角丸・円に厳密一致させます。
出力したコードはそのまま使えますか？
HTML（マークアップ＋SVGフィルタ）とCSSをコピーして貼るだけ。外部依存なしの自己完結構成です。