【CodePen】リキッドグラス・グラスモーフィズムのアイデア14選

💡 実装のポイント
SVGの<filter id="refractionFilter">でfeTurbulence（fractalNoise）とfeDisplacementMapを組み合わせ、backdrop-filter: url(#refractionFilter) contrast(1.01) brightness(1.1)として屈折感を出している。.glassのbox-shadowはinset成分を4つ重ねてハイライトを表現。feDisplacementMapのscale値（150）を変えると歪みの強さを調整できる。JSはmousedown/mousemoveとtouch系イベントのみのシンプルなドラッグ実装。

💡 実装のポイント
ライブラリ不使用の素のWebGLでフラグメントシェーダーを自作している構成。roundedBox関数で角丸レンズ形状のマスクを計算し、マウス位置を中心に周囲の背景テクスチャをサンプリングして拡大表示するレンズ効果を実現している。POWER_EXPONENTやMASK_MULTIPLIER_1〜3などのシェーダー内定数を変えると形状や強度を調整できるが、コピペ利用にはWebGLの知識が必要で難易度は高め。

💡 実装のポイント
後述の10番目「Liquid Glass Apple」（wprod氏）をフォークした作例。.glass-filter（backdrop-filter＋SVGフィルターurl(#lg-dist)）、.glass-overlay（半透明の背景色）、.glass-specular（ハイライト用box-shadow）の3層構造は共通で、SVGのfeTurbulence＋feGaussianBlur＋feDisplacementMapで背景を歪ませている。同じベース構造をプレイヤーUIに転用した参考例として見やすい。

💡 実装のポイント
.liquidGlass-wrapper／-effect／-tint／-shineの4層構造でDock風UIを構成。SVGのfeSpecularLighting＋fePointLightで光源位置を計算したリアルな反射光を演出しているのが特徴。.dock:hoverで角丸やpaddingを変化させDockのバウンド感を再現している。コメントにある通り、子要素にも同じborder-radiusを重ねて指定する必要がある点に注意。

💡 実装のポイント
質感自体はHTML/CSSのみで表現し、JSはドラッグ移動のみに使用。backdrop-filterにfeTurbulence＋feDisplacementMapのSVGフィルターを重ね、box-shadowのinset成分をcolor-mix()で細かく調整して明暗の反射光を表現しているのがユニーク。CSS変数（--glass-reflex-dark／--glass-reflex-light／--saturation）で質感を一括調整できる設計。

💡 実装のポイント
mix-blend-mode: differenceを使い、背景の白黒に応じてテキスト・アイコンの色を自動反転させる手法が特徴（グラス自体の質感はbackdrop-filter: blur(10px)のみ）。ドラッグはPointer Events APIで実装し、3秒ごとにjiggleクラスをトグルして自動でわずかに振動するアニメーションを入れている。

💡 実装のポイント
.lg-btn（単純なbackdrop-filter: blur(4px)）と.lg-btn.gl（feDisplacementMap＋feGaussianBlurのSVGフィルターを重ねたもの）の2パターンを並べて比較できる構成。作者コメントにもある通り、backdrop-filter: url(#filter)によるSVGフィルターはiOS Safariでは非対応のため、実務で使う場合は代替表示（単純なblurへのフォールバック）を用意する必要がある。

💡 実装のポイント
html2canvasでページ全体をスナップショットし、WebGLシェーダーでその画像をサンプリング・屈折表示する本格的なライブラリ実装。Container／Buttonのクラス設計で角丸・円形・ピル型の3形状に対応し、子ボタンが親コンテナの描画結果を再サンプリングする「ネストしたグラス」の仕組みが特徴。実装規模が大きいため、そのまま流用するより設計思想の参考にするのが現実的。

💡 実装のポイント
WebGL2とメタボールSDF（符号付き距離関数）で3つの液滴が結合・分離するローディングスピナー。Tweakpaneでrefraction・dispersion・specularなど光学パラメータをリアルタイム調整できる。色収差（chromatic aberration）をR/G/Bごとに屈折率を変えて個別計算しているのが特徴で、クリックすると波紋が広がるインタラクションも搭載している。

💡 実装のポイント
.glass-filter／.glass-overlay／.glass-specularの3層構造がベースパターンで、本記事の#3・#11などのフォーク元にもなっている定番実装。SVGのfeComponentTransfer＋feGaussianBlur＋feDisplacementMapで柔らかい屈折を作っている。プレイヤー・Dock風メニュー・検索ボックスなど複数のUIパターンを1つのPenにまとめて収録している点も参考になる。

💡 実装のポイント
feImageで生成したradialGradientをノーマルマップとして使い、feDisplacementMapで屈折させるシンプルな手法。カード3枚をhoverでscale(1.2)に拡大するインタラクションが付いている。背景はmacOS Tahoeの壁紙画像をbackground-positionのアニメーションでスクロールさせて動きを出している。

💡 実装のポイント
SVGフィルターは使わず.card { backdrop-filter: blur(10px) }のみで統一したダッシュボードUI。grid-template-columns: repeat(4, 1fr)のグリッドレイアウトにカードを配置し、.card-large／.card-tallのユーティリティクラスでサイズを可変にしている。管理画面系のグラスUIを組む際の土台として流用しやすい構成。

💡 実装のポイント
.glass-panelクラスにbackdrop-filter: blur(12px)を適用したランディングページ全体の構成例。particles.jsで背景にパーティクルをふわふわと浮かせ、blur(80px)をかけた色付きの円（.liquid-shape）をfloatアニメーションさせることで、背後に「リキッドな」発光ブロブを表現している。ナビ・ヒーロー・カードなどページ単位でグラス表現を統一する参考になる。

💡 実装のポイント
.glass共通クラス（linear-gradient背景＋backdrop-filter: blur(22px) saturate(1.6)＋inset box-shadow）を、ボタン・トグル・スライダー・モーダル・アコーディオンなど17種類のUIパーツに使い回すコンポーネントライブラリ的な構成。ダークモード／ライトモードをCSS変数（--glassや--inkなど）の再定義だけで丸ごと切り替えられる設計になっている点が実務でも参考になる。