Liquid Glassジェネレーター｜WebGLでApple風の液体ガラスUIをコード生成（無料）

Liquid Glassジェネレーターは、AppleのLiquid Glass（液体ガラス）をWebGLで本物の屈折まで再現し、コピペできるコードを書き出す無料ツールです。背景画像の上にガラスのボタンやカードを置き、屈折・色収差・すりガラス・スペキュラをスライダーで調整できます。登録不要・透かしなし。

Liquid Glassとは

Liquid Glass（リキッドグラス／液体ガラス）は、Appleが2025年に発表しiOS 26・macOS Tahoeなどで採用された半透明のガラス素材表現です。背景を屈折（レンズのように歪ませる）させ、縁に鏡面ハイライトとわずかな色収差を載せ、全体をすりガラス状にぼかすのが特徴です。

WebGL方式とCSS方式の違い

多くのLiquid Glassジェネレーターは backdrop-filter とSVGフィルタによるCSS方式です。手軽ですが、背景を本当に屈折させることはできず、すりガラス＋ハイライトの平面的な表現にとどまります。本ツールはWebGL（GLSLシェーダー）で背景ピクセルをシェーダーで再サンプリングするため、縁のレンズ歪み・色収差まで実物に近づきます。

項目	CSS方式（一般的なツール）	WebGL方式（本ツール）
背景の屈折	不可（平面的なぼかしのみ）	可（レンズのように歪む）
色収差	擬似的	RGBずらしで実物に近い
ページ背景への追従	追従する	背景画像を焼き込む方式
出力	CSS / HTML	自己完結のWebGLスニペット

使い方（3ステップ）

形状（ボタン／カード／ピル／円）と背景画像を選びます。
屈折・ぼかし・スペキュラ・色収差・ティントを調整し、必要ならボタンのテキストを入力します。
「コードをコピー」で自己完結のWebGLスニペットを取得し、背景URLをご自身の画像に差し替えて貼り付けます。

こんな場面に

ヒーローセクションのガラス風CTAボタン
画像の上に重ねるガラスカード・価格カード
iOS 26風のガラスUIモックアップ
ポートフォリオやランディングページのアクセント

仕組みと注意点

背景画像をcanvasに描画し、角丸矩形のガラス領域だけシェーダーで屈折・色収差・ぼかし・スペキュラを合成しています。
出力コードは背景画像をcanvasに焼き込む方式です。任意のページ背景（その下にある記事本文など）には追従しません。ヒーローやカードなど、背景画像が決まっている箇所に向いています。
屈折・色収差はChrome / Safari / Edge（WebGL対応ブラウザ）で表示されます。

よくある質問

Liquid Glassジェネレーターは無料ですか？

はい。完全無料で、登録も透かしもありません。生成したコードはそのまま商用利用できます。

CSS方式のLiquid Glassジェネレーターと何が違いますか？

多くのツールは backdrop-filter とSVGフィルタによるCSS方式で、背景を本当に屈折させることはできません。本ツールはWebGL（GLSLシェーダー）で背景ピクセルを再サンプリングするため、レンズのような屈折と縁の色収差まで実物に近づきます。

効果はページの背景に追従しますか？

いいえ。出力コードは背景画像をcanvasに焼き込む方式のため、その下にある任意のページ要素には追従しません。背景画像が決まっているヒーローやカードに向いています。

対応ブラウザは？

Chrome・Safari・EdgeなどWebGL対応ブラウザで屈折・色収差が表示されます。

生成したコードは商用利用できますか？

はい。生成されたコードはあなたのものです。背景画像のURLをご自身の権利のある画像に差し替えてご利用ください。

AppleのLiquid Glassとは何ですか？

Appleが2025年に発表したiOS 26・macOS Tahoeなどで採用された半透明のガラス素材表現です。背景を屈折させ、縁に鏡面ハイライトと色収差を載せ、全体をすりガラス状にぼかすのが特徴です。