Liquid Glassジェネレーターは、AppleのiOS 26で採用された液体ガラス（Liquid Glass）風のUIを、WebGLでコード生成できる無料ツールです。インストールも会員登録も不要で、形状・ぼかし・縁の光・色収差などをスライダーで調整すると、そのままWebサイトに貼れるコードが自動で書き出されます。最大の特徴は、CSSのbackdrop-filterだけでは表現できない背景の「屈折（歪み）」までGLSLシェーダーで再現することです。
Liquid Glassの「ガラスらしさ」は、半透明とぼかしだけでは出ません。本物のガラス越しに見える景色は、レンズのように背景が歪んで見えます。ところがCSSのbackdrop-filterでできるのは背景のぼかしや明度調整までで、背景そのものを屈折させる表現は標準のCSSプロパティでは作れません。そのため「CSSで作ったLiquid Glassが、どこか平面的でガラスに見えない」という壁にぶつかりがちです。
この記事では、CodeQuest.workのLiquid Glassジェネレーターでできることと、形状の選び方から光学効果パラメータの調整、生成コードの仕組み、自分のサイトへの組み込みまでを順番に解説します。CSSだけで作る方法とWebGLツールで作る方法の使い分けも整理するので、用途に合わせて選べるようになります。
このツールでできること
Liquid Glassジェネレーター（無料・ブラウザ完結）は、Apple風の液体ガラスUIを視覚的に調整して、実装用コードを書き出すツールです。できることを整理すると次のとおりです。
| 項目 | できること |
|---|---|
| 形状の選択 | ボタン・カード・ピル・円の4種類からガラスの形を選ぶ |
| 背景画像の差し替え | 任意の画像をアップロードし、その上でガラスの見え方を確認 |
| 光学効果の調整 | 屈折の強さ・すりガラス・縁の光・色収差・縁の厚み・角丸を個別に調整 |
| ティント | ガラスに乗せる色味（ティント濃度）を調整 |
| リアルタイムプレビュー | プレビュー上でガラスをドラッグして移動し、背景との重なりを確認 |
| コード生成・コピー | 調整した状態のWebGLコードを自動生成し、ワンクリックでコピー |
ポイントは、コードを一行も書かずに屈折ガラスの見た目を詰められることです。シェーダーのパラメータを手で書き換えながら調整するのは骨が折れますが、スライダーでリアルタイムに結果を見ながら追い込み、決まったらコードを書き出すだけで済みます。
CSSのbackdrop-filterでは「屈折」は作れない — WebGLで再現する
このツールの核心は、純粋なCSSでは不可能な「屈折」をWebGLのGLSLシェーダーで再現している点にあります。ここが、CSSで作るガラスモーフィズムとの決定的な違いです。
CSSのbackdrop-filterでできるのは、要素の背後に対するぼかし（blur）・明度・彩度・コントラストなどのフィルター処理です。これで「すりガラス」風の半透明UIは作れますが、背景のピクセルを移動させて歪ませる＝レンズのような屈折は、フィルターの仕様上どうしても再現できません。背景が歪まないため、CSSだけのガラスはのっぺりと平面的に見えがちなのです。
一方このツールは、背景画像をWebGLのcanvasに描画し、ガラス領域のピクセルをシェーダーで意図的にずらすことで屈折を表現します。縁に近いほど大きく歪ませる、わずかに色をずらして色収差を出す、といったガラス特有の光学現象まで作り込めるため、CSSでは届かない「本物のガラスらしさ」に近づけられます。WebGLはcaniuse.comによると主要ブラウザでほぼ全面的にサポートされており、特別なプラグインなしで動作します。
逆に言えば、屈折まで要らず半透明のすりガラスで十分なら、CSSだけで作るほうが軽量で手軽です。その作り方はiOS風「Liquid Glass」をWebで再現する方法（CSS・Tailwind実装）で解説しています。本記事のツールは「CSSでは出せない屈折まで作り込みたい」場合の選択肢です。
基本の使い方【4ステップ】
操作は視覚的で、シェーダーやWebGLの知識がなくても扱えます。基本の流れは次の4ステップです。
- 形状を選ぶ — ボタン・カード・ピル・円から、作りたいUIに合う形を選びます
- 背景画像をアップロード — 「画像をアップロード」から、実際に使う背景に近い画像を読み込みます（屈折の見え方は背景で大きく変わるため）
- 光学効果を調整する — 屈折の強さ・すりガラス・縁の光・色収差・縁の厚み・角丸・ティント濃度を、プレビューを見ながらスライダーで詰めます
- コードを生成してコピー — プレビュー上でガラスをドラッグして配置を確認し、納得できたらコードを生成してコピーします
プレビューはリアルタイムに反映されるので、まずは各スライダーを大きく動かして変化を確認し、そこから好みの値に寄せていくと早く決まります。まずは手元の画像で試してみてください。
形状とテキスト — ボタン・カード・ピル・円
形状は、Webで実際に使うパーツに合わせて4種類から選べます。用途の目安は次のとおりです。
| 形状 | 向いている用途 |
|---|---|
| ボタン | CTA・操作ボタン。テキストを乗せたガラスボタンに |
| カード | 情報カード・モーダル・パネルの背景 |
| ピル | タグ・トグル・ナビゲーションのセグメント |
| 円 | アイコンボタン・フローティングボタン（FAB） |
テキストを表示する形状では「文字サイズ」で大きさを調整できます。ガラス越しに見える文字は背景とコントラストが付きにくいため、ボタンやピルでは文字サイズをやや大きめにし、後述の縁の光やティントで視認性を補うとバランスが取りやすくなります。
光学効果の調整 — 屈折・ぼかし・縁の光・色収差
ガラスらしさを決めるのが光学効果のパラメータ群です。それぞれが見た目に与える役割を理解すると、狙った質感に最短で寄せられます。
| パラメータ | 役割 | 上げると |
|---|---|---|
| 屈折の強さ | 背景をレンズのように歪ませる量 | 立体的でガラスらしくなる（強すぎると歪み過多） |
| すりガラス（ぼかし） | ガラス領域全体のぼかし | 背景がぼやけてフロスト感が増す |
| 縁の光（スペキュラ） | 縁の鏡面ハイライトの強さ | エッジが光り、輪郭が際立つ |
| 色収差 | わずかな色ズレ（RGBの分離） | レンズのようなリアルな質感になる |
| 縁の厚み | ガラス縁部の厚さ | 分厚いガラスの印象になる |
| 角丸 | コーナーの丸み | 柔らかい印象に（iOS系UIは大きめが定番） |
iOS 26のLiquid Glassに寄せたいなら、屈折は中程度・縁の光をしっかり・色収差は控えめ・角丸は大きめが出発点として扱いやすい組み合わせです。屈折と色収差を上げすぎると装飾過多になり、肝心のコンテンツが読みにくくなるので、効果は「気づくか気づかないか」くらいに抑えるのがガラスUIのコツです。
ティントと背景画像の設定
「ティント濃度」はガラスに乗せる色味の強さです。薄く乗せるとブランドカラーをほのかに反映でき、濃くするとコンテンツの可読性が上がります。背景が複雑で文字が読みにくいときは、ティントをやや濃いめにすると視認性とデザイン性を両立できます。
屈折ガラスの見え方は背景に強く依存します。無地の背景だと屈折がほとんど分からず、写真やグラデーションなど明暗・色の変化がある背景ほどガラスらしさが際立ちます。そのため、調整時は実際のサイトで使う背景に近い画像をアップロードして確認するのが重要です。デモ用のきれいな背景で詰めても、本番の単色背景では効果が消えてしまう、という事故を防げます。
生成されるコードの仕組み
このツールが書き出すのは、軽量なWebGLライブラリoglをCDNから読み込む自己完結型のスニペットです。フレームワークやビルド環境は不要で、HTMLにそのまま貼り付ければ動きます。
仕組みを大まかに説明すると、次のような流れです。
- oglのモジュールをCDNから読み込み、WebGLのcanvasを生成する
- 指定した背景画像をテクスチャとしてcanvasに描画する
- ガラス領域のピクセルを、調整した屈折・色収差・縁の光のパラメータでずらすGLSLシェーダーを適用する
- 形状（ボタン・カード・ピル・円）と角丸に合わせてガラスの輪郭をマスクする
生成コードには「backgroundのURLをご自身の画像に差し替えてください」という注記が含まれます。プレビューで使った画像はあくまで確認用なので、実装時は本番の背景画像のURLに置き換える点だけ覚えておけば大丈夫です。
自分のサイトに組み込む手順
コピーしたコードをサイトに組み込む流れはシンプルです。
- コードを貼り付ける — 生成されたスニペットを、ガラスを表示したい場所のHTMLに貼り付けます
- 背景画像のURLを差し替える — コード内のbackground画像のURLを、本番で使う画像のパスに変更します
- 表示位置とサイズを調整する — canvasの配置やサイズをCSSで調整し、レイアウトに馴染ませます
WebGLのcanvasで描画するため、既存のCSSレイアウトと重ねる場合はpositionやz-indexでの重なり順の調整が必要になることがあります。実装後は、本番に近い背景・端末で見え方を確認しておくと安心です。
CSS実装とWebGLツールの使い分け
Liquid Glassは「CSSで作る」「WebGLツールで作る」のどちらが正解というものではなく、求める質感とコストで使い分けるのが現実的です。判断の目安を表にまとめます。
| 観点 | CSS実装（backdrop-filter） | WebGLツール（本記事） |
|---|---|---|
| 屈折（背景の歪み） | 不可 | 再現できる |
| すりガラス・半透明 | 得意 | 再現できる |
| 動作の軽さ | 軽い | WebGL描画のぶん負荷は高め |
| 実装の手軽さ | CSSのみで完結 | canvas配置の調整が必要 |
| 向いている場面 | 多数配置・シンプルなガラスUI | ヒーローやアクセントで本物感を出したい |
ナビゲーションやカードのように数を多く置くUIはCSSで軽量に、ファーストビューの主役やアクセントとして本物のガラスらしさを見せたい1〜2箇所はWebGLツールで、と組み合わせるのが落としどころです。CSSだけで作る具体的な手順はiOS風「Liquid Glass」をWebで再現する方法を参照してください。
注意点・制限事項
使い始める前に、WebGLで描画するツールならではの制約を押さえておくと迷いません。
- WebGL対応ブラウザが前提 — 主要ブラウザはほぼ対応済みだが、WebGLが無効な環境ではフォールバック表示の検討が必要
- 多用するとパフォーマンスに影響する — canvas描画は負荷があるため、ページ内で多数並べるのは避け、アクセントとして使う
- 背景は実装時に差し替える — プレビューの画像は確認用。本番ではbackgroundのURLを自分の画像に変更する
- 可読性を最優先する — 屈折や色収差を強くしすぎると、ガラス越しのテキストが読みにくくなる。効果は控えめに調整する
iOS 26のLiquid GlassそのものとWeb実装には差があるため、「完全な再現」ではなく「Webで十分にガラスらしく見せる」ことを目標にすると、現実的なバランスに落とし込めます。
ガラスUIができたら、SEOで見つけてもらう
思いどおりのLiquid Glass UIができてサイトの見た目が仕上がったら、次は「そのページが検索で見つけてもらえるか」を確認するのが次の一手です。デザインが良くても、タイトルやメタ情報、構造化データに穴があると、検索結果にうまく出てきません。
CodeQuest.work SEOなら、URLを入れるだけでページのSEOスコアと改善ポイントがその場で分かります。無料プランでも毎月3回までURL診断ができるので、サイト公開後のチェックにそのまま使えます。
よくある質問
Q. CSSのbackdrop-filterと何が違うのですか？
backdrop-filterは背景のぼかしや明度・彩度の調整までで、背景を歪ませる「屈折」はできません。このツールはWebGLのシェーダーで背景のピクセルをずらすため、レンズのような屈折や色収差まで再現でき、CSSだけでは出せないガラスらしさを出せます。
Q. WebGLやシェーダーの知識は必要ですか？
不要です。スライダーで見た目を調整するとコードが自動生成されるため、シェーダーを書かずに屈折ガラスを作れます。生成されたコードを貼り付け、背景画像のURLを差し替えるだけで動きます。
Q. 生成されるコードにライブラリは必要ですか？
軽量なWebGLライブラリoglをCDNから読み込む自己完結型のスニペットが生成されます。npmインストールやビルド環境は不要で、HTMLに貼り付ければそのまま動作します。
Q. 画像はサーバーにアップロードされますか？
背景画像の読み込みとプレビューはブラウザ内で完結します。会員登録も不要で、WebGL対応ブラウザがあればすぐに使えます。
Q. CSSだけで作る方法と、どちらを選べばよいですか？
多数配置するシンプルなガラスUIや動作の軽さを優先するならCSS実装、ファーストビューやアクセントで本物のガラスらしさ（屈折）を見せたいならWebGLツールが向いています。両方を組み合わせるのが実用的です。
Q. スマホでも表示できますか？
WebGL対応のモバイルブラウザなら表示できます。ただしcanvas描画は端末性能の影響を受けるため、モバイルでは多用を避け、アクセント的に使うのがおすすめです。
まとめ
Liquid Glassジェネレーターは、Apple風の液体ガラスUIをWebGLでコード生成できる無料ツールです。最大の強みは、CSSのbackdrop-filterでは作れない背景の屈折を再現できること。形状・ぼかし・縁の光・色収差・ティントをスライダーで調整し、oglをCDN読み込みする自己完結スニペットを書き出せます。背景画像のURLを差し替えるだけで自分のサイトに組み込めます。
屈折まで要らないシンプルなガラスはCSSで軽量に、本物感を出したいアクセントはこのツールで——と使い分けるのがおすすめです。まずはブックマークして、手元の背景画像でガラスの質感を試してみてください。
