リキッドガラスCSSジェネレーター｜スクロール追従する屈折ガラスをコピペ

透過リキッドガラスCSSジェネレーターとは、backdrop-filterとSVGのfeDisplacementMapだけで、背後に表示されているコンテンツをリアルタイムに屈折させる液体ガラスのボタンやカードを作れる無料ツールです。WebGLや外部ライブラリは使いません。ページをスクロールして後ろが動けば、ガラスの歪みもそれに追従します。

iOS風のリキッドガラスをCSSだけで作ろうとすると、たいていはbackdrop-filter: blur()でぼかして、縁にハイライトを足すところで止まります。ぼかしと透明感は出せても、ガラスらしさの核心である「縁で背景がぐにゃりと曲がる屈折」だけは、素のCSSでは表現できません。かといって、屈折のためにWebGLを持ち込むと、ライブラリ読み込みや背景の扱いが一気に重くなります。

この記事では、CodeQuestが公開している透過リキッドガラスCSSジェネレーターの使い方を解説します。backdrop-filterとSVGフィルタの組み合わせだけで縁の屈折を再現し、しかも背後のページをライブに歪ませる仕組み、形状や歪み・ティントの調整、そのまま貼れるHTML/CSSの出力までを、実際の操作に沿って紹介します。ブラウザだけで完結し、登録は不要です。

「スクロール追従するライブ屈折」とは何か

このツールの一番の特徴は、ガラスの背後に表示されているコンテンツのピクセルを、その場で屈折させる点です。あらかじめ用意した画像を歪ませるのではなく、ガラスの真後ろにあるコンテンツ——文字でも、画像でも、グラデーション背景でも——を縁で曲げて見せます。

背景を画像として焼き込んでいないため、ページをスクロールして後ろのコンテンツが動けば、ガラス越しの歪みもリアルタイムに追従します。固定配置したガラスのボタンの下を本文が流れていくと、流れる文字が縁でゆらめいて見える、という挙動です。静止画を歪ませる方式では出せない、本物のガラスに近い質感がここから生まれます。

これを<canvas>やWebGLなしで、backdrop-filterとSVGフィルタというCSS標準の機能だけで実現しているのがポイントです。出力されるのは自己完結したHTMLとCSSのみなので、貼り付け先のフレームワークを選びません。

このツールでできること

透過リキッドガラスCSSジェネレーターは、屈折するガラスUIをコードを書かずに作ることに特化しています。主な機能は次のとおりです。

機能	内容
ライブ屈折	背後のページのピクセルを`feDisplacementMap`で縁から歪ませる。スクロールで背景が動けば歪みも追従
4つの形状プリセット	ボタン／ピル／円／カードをワンクリックで切り替え。幅・高さ・角丸の基準値が一括で入る
歪み・縁の調整	歪み強度と「縁の屈折幅」を別々に調整。縁だけ曲げて中心は素通り、という配分を作れる
ぼかし・彩度	背後の`blur`と`saturate`でフロスト感と透明感を調整
ティント・縁ハイライト	ガラスの色と濃度、縁の内側ハイライトと境界線の強さを個別に設定
ラベルとリンク	テキスト・文字色・サイズとリンク先URLを設定。クリック範囲を形状に一致させる
自動フォールバック	屈折非対応ブラウザでは、ぼかし＋ティント表示に自動で切り替わり崩れない
コピペ出力	`backdrop-filter`と`-webkit-`を併記した自己完結のHTML/CSSを出力

画像やデータをサーバーに送信せず、すべてブラウザ内で処理します。生成したコードはそのまま商用サイトでも利用できます。

使い方：3ステップでコードを作る

操作はおおきく3ステップです。難しい設定はありません。

形を選ぶ： 上部でボタン・ピル・円・カードのいずれかを選び、ベースの形を決めます。幅・高さ・角丸はあとからスライダーで微調整できます。
質感を調整する： 歪み強度・縁の屈折幅・ぼかし・彩度・ティント・縁ハイライトの各スライダーを動かし、プレビューを見ながら好みのガラスに仕上げます。背景を切り替えて、明るい背景・暗い背景それぞれでの見え方も確認できます。
コードをコピーする： 下部にHTMLとCSSが生成されるので、それぞれのコピーボタンを押して貼り付けます。リンク先URLを入れておけば、そのままクリックできるガラスのボタンになります。

プレビューの背景はスクロールできる帯になっているので、実際にスクロールさせて「背景が動くと歪みが追従するか」をその場で確かめられます。これがライブ屈折を確認する一番わかりやすい方法です。

透過リキッドガラスCSSジェネレーターを使ってみる →

なぜCSSだけで屈折できるのか：backdrop-filter ＋ SVG の仕組み

結論から言うと、backdrop-filterにSVGフィルタを差し込み、その中のfeDisplacementMapで背景ピクセルをずらしているからです。素のCSSにあるblur()やsaturate()だけでは屈折はできませんが、backdrop-filterはurl(#フィルタID)でSVGフィルタを参照でき、ここに屈折を担当させます。

ツールが出力するCSSは、おおむね次のような形です。backdrop-filterの中で、ぼかし・彩度に加えてurl(#liquid-glass-filter)を呼び出しているのがわかります。

.liquid-glass {
  width: 140px;
  height: 140px;
  border-radius: 70px;
  /* blur と saturate に加えて SVG フィルタ url() で屈折を適用 */
  -webkit-backdrop-filter: blur(0px) saturate(1.6) url(#liquid-glass-filter);
  backdrop-filter: blur(0px) saturate(1.6) url(#liquid-glass-filter);
  background: rgba(255, 255, 255, 0.12);   /* ティント */
  border: 1px solid rgba(255, 255, 255, 0.4);
  /* 縁の内側ハイライトと外側の影でガラスの厚みを表現 */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6),
              inset 0 -1px 1px rgba(0, 0, 0, 0.24),
              0 8px 32px rgba(0, 0, 0, 0.18);
  color: #ffffff;
  /* クリック範囲を角丸の形状に一致させる */
  clip-path: inset(0 round 70px);
}

屈折の本体はSVG側です。ツールは「縁だけが外向きに歪み、中心は歪まない」変位マップ画像をその場で生成し、それをfeImageで読み込んでfeDisplacementMapに渡します。feDisplacementMapは、マップ画像の赤チャンネルを横方向（X）、緑チャンネルを縦方向（Y）のずらし量として解釈し、背景ピクセルを移動させます。

<!-- 屈折用 SVG フィルタ（ページに1つでOK） -->
<svg width="0" height="0" aria-hidden="true" style="position:absolute">
  <filter id="liquid-glass-filter" color-interpolation-filters="sRGB"
          primitiveUnits="userSpaceOnUse">
    <!-- ツールが自動生成した「縁だけ歪む」変位マップ（data URI が入る） -->
    <feImage href="data:image/png;base64,..." width="140" height="140" result="map"/>
    <!-- R チャンネル=X方向、G チャンネル=Y方向にずらす -->
    <feDisplacementMap in="SourceGraphic" in2="map"
                       scale="75" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

「歪み強度」のスライダーはfeDisplacementMapのscaleを、「縁の屈折幅」は変位マップ側で歪ませる帯の太さを動かしています。backdrop-filterとfeDisplacementMapの詳しい仕様は、MDNのbackdrop-filter と feDisplacementMapのリファレンスも参考になります。

調整できるパラメータ一覧

プレビューを見ながら動かせるスライダーと入力項目は次のとおりです。どれを動かすとガラスのどこが変わるかを押さえておくと、狙った質感に早くたどり着けます。

パラメータ	役割	効果
歪み強度	`feDisplacementMap`の`scale`	大きいほど縁の背景が強く曲がる。上げすぎると割れて見える
縁の屈折幅	歪ませる縁の帯の太さ	太いほど屈折が内側まで及ぶ。細いとシャープなレンズ縁になる
ぼかし	背後の`blur`	フロストガラス感。0なら背景がくっきり屈折、上げると曇りガラス
彩度	背後の`saturate`	上げると背景の色が濃く透けて、ガラスに透明感が出る
ティント色／濃度	ガラス自体の色と不透明度	白で曇りガラス、暗色でスモークガラス。濃度で色の強さを調整
縁ハイライト	内側の`box-shadow`	縁の内側に光のラインを入れ、ガラスの厚みと立体感を出す
境界線	`border`の不透明度	輪郭をはっきりさせる。0に近づけると縁が背景になじむ
幅・高さ・角丸	要素のサイズと丸み	形状プリセットの基準値から自由に微調整できる

「歪み強度」と「縁の屈折幅」が分かれているのがこのツールのポイントです。強度だけ上げると縁全体が大きく動き、幅だけ広げると歪む範囲が内側に広がります。2つを組み合わせると、薄いレンズから分厚いガラスまで質感を作り分けられます。

4つの形状プリセット

よく使う形は、ボタン1つで呼び出せるプリセットとして用意しています。呼び出したあとも幅・高さ・角丸をスライダーで調整できます。

プリセット	基準サイズ	主な用途
ボタン	横長・角丸18px	CTAボタン・ナビゲーションのアクション
ピル	横長・角丸を最大	丸い端の小さなボタン・タグ・トグル
円	正方形・完全な円	アイコンボタン・アバター枠・フローティングボタン
カード	大きめ・角丸28px	ガラスパネル・モーダル・情報カードの土台

角丸はborder-radiusとして出力され、最大まで上げると円やピル形状になります。クリック範囲もclip-path: inset(0 round ...)で同じ角丸に切り抜かれるため、丸いボタンの角の外側を押しても反応しない、といった違和感がありません。

WebGL版・手書きCSSとの使い分け

CodeQuestにはリキッドガラスを扱うツールと記事が複数あります。屈折の作り方が違うので、目的に合わせて選んでください。

やりたいこと	向いている方法
背後のコンテンツを屈折させ、スクロールで歪みも追従させたい	このツール（backdrop-filter＋SVG）
背景画像や3D的な質感で、より本格的な屈折・色収差を出したい	WebGL版ジェネレーター
仕組みを理解しながらCSSを手書きで実装したい	Pure CSSの実装解説記事

背景を焼き込んでogl（WebGL）で屈折・色収差まで作り込みたい場合は、WebGL版のLiquid Glassジェネレーターが向いています。重い代わりに表現の自由度が高いのが特徴です。

屈折は使わず、backdrop-filter: blur()と縁のハイライトだけのシンプルなガラスでよければ、iOS風リキッドガラスをCSSで再現する記事で手書き実装の手順を解説しています。仕組みから理解したい人はこちらが近道です。

ガラスではなく金属的に光る液体メタルのボタンを作りたいなら、WebGLで作るリキッドメタルボタンの記事も参考になります。

ブラウザ対応とフォールバック

正直にお伝えすると、backdrop-filterのSVGフィルタによるライブ屈折が効くのは、実質的にChrome・Edge（Chromium系）だけです。SafariとFirefoxはbackdrop-filter内のurl()フィルタを無視します。

ただし、無視されても表示は崩れません。url()だけが効かず、blur()とsaturate()、ティント、縁のハイライトはそのまま残るため、SafariやFirefoxでは「屈折のないフロストガラス」として自然に劣化します。ツール側もブラウザを判定して、対応・非対応を画面上に表示します。

ブラウザ	見え方
Chrome / Edge	ライブ屈折あり（縁で背景が曲がり、スクロールに追従）
Safari / Firefox	屈折なし。ぼかし＋ティント＋ハイライトのフロストガラス
iOS Safari	ぼかし＋ティント表示（屈折は非対応）

つまり「屈折は対応ブラウザへのご褒美、非対応でも普通にきれいなガラス」という設計です。backdrop-filter自体の対応状況はCan I useの対応表で確認できます。重要なUIにライブ屈折を必須要素として組み込むのは避け、装飾の上乗せとして使うのが安全です。

クリック範囲をリンクの形状に一致させる

ガラスをボタンとして使うとき、見た目の形とクリックできる範囲がずれていると使いにくくなります。たとえば円形のボタンなのに、角の外側の透明な部分まで反応してしまう、といった問題です。

このツールが出力するコードは、clip-path: inset(0 round 角丸)で要素自体を形状どおりに切り抜きます。これにより、見た目の形＝クリックできる範囲になり、丸いボタンは丸い部分だけが反応します。リンク先URLを入力しておけば、出力されるのは<a>要素になり、そのままクリック可能なガラスのボタンとして機能します。

なお、clip-pathでさまざまな図形を作る方法は clip-path ジェネレーターの使い方で詳しく解説しています。

よくある失敗・注意点

リキッドガラスでつまずきやすいポイントを3つにまとめます。

Safari/Firefoxで「屈折しない」と悩む： 不具合ではなく仕様です。これらのブラウザはbackdrop-filter内のurl()を無視します。屈折はChrome/Edge限定と割り切り、非対応ブラウザではフロストガラスになる前提で設計してください。
歪み強度を上げすぎて割れる： scaleを大きくしすぎると背景が大きくずれて、ガラスというより破損したレンズに見えます。縁の屈折幅とのバランスを取り、強度は控えめから上げていくのがコツです。
背後に何もないと効果が見えない： backdrop-filterは「背後にあるもの」を加工する性質上、ガラスの後ろに文字や画像、模様がないと屈折もぼかしも目立ちません。背景のあるセクションに重ねて使ってください。

リキッドガラスに合わせるホバーやスクロールの動きを足したい場合は、CSS実装テクニック集も合わせてどうぞ。

よくある質問（FAQ）

Q. 透過リキッドガラスCSSジェネレーターは無料ですか？

はい。完全無料で、登録も透かしもありません。生成したHTML/CSSはそのまま商用サイトでも利用できます。データはサーバーに送信されず、すべてブラウザ内で処理されます。

Q. WebGLやライブラリは必要ですか？

不要です。このツールはbackdrop-filterとSVGフィルタというCSS標準の機能だけで屈折を作ります。出力されるのは自己完結したHTMLとCSSのみで、JavaScriptライブラリの読み込みは要りません。

Q. なぜCSSだけで背景が屈折するのですか？

backdrop-filterからurl()でSVGフィルタを呼び出し、その中のfeDisplacementMapで背景ピクセルをずらしているためです。ツールが「縁だけ歪む」変位マップ画像を自動生成し、それをずらし量として使っています。

Q. Safariやスマホでも屈折しますか？

ライブ屈折はChrome・Edge（Chromium系）でのみ表示されます。SafariやFirefox、iOS Safariはurl()フィルタを無視し、ぼかし＋ティントのフロストガラス表示に自動で切り替わります。表示は崩れません。

Q. スクロールすると歪みが追従するのはなぜですか？

背景を画像として焼き込まず、backdrop-filterで「いま背後に表示されているコンテンツ」を加工しているからです。後ろのコンテンツがスクロールで動くと、その動いたピクセルがそのまま屈折に反映されます。

Q. 作ったガラスはボタンとして使えますか？

はい。リンク先URLを入力すると<a>要素として出力され、クリックできるボタンになります。clip-pathでクリック範囲を形状に一致させているので、見た目どおりの部分だけが反応します。

まとめ

透過リキッドガラスCSSジェネレーターは、backdrop-filter＋SVGのfeDisplacementMapだけで、背後のページをライブに屈折させるツール。WebGLもライブラリも不要
背景を焼き込まないため、スクロールで後ろが動けば歪みも追従する
形状4種・歪み強度・縁の屈折幅・ぼかし・彩度・ティント・縁ハイライトを調整し、コピペできるHTML/CSSを出力
ライブ屈折はChrome/Edge限定。Safari/Firefoxはぼかし＋ティントに自動で劣化し崩れない
ブラウザ完結・登録不要で、生成コードは商用利用も可能

CSSだけでは届かなかった「縁で背景が曲がる」質感が、コピペで手に入ります。まずは円のプリセットを呼び出して、歪み強度のスライダーを動かすところから試してみてください。

透過リキッドガラスCSSジェネレーターでガラスを作る →

作ったデザインを公開したあとは、検索エンジンに正しく見つけてもらう番です。CodeQuest.work SEOの無料診断で、サイトの構造化データや表示速度をチェックできます。

サイトのSEOを無料で診断する → CodeQuest.work SEO

Apple風の屈折ガラスをWebGLで生成するLiquid Glassジェネレーター｜使い方ガイド

iOS風「Liquid Glass」をWebで再現する方法

clip-path ジェネレーターの使い方｜CSSの図形をドラッグで作ってコピー