ガラスの屈折やぼかしも美しい！ WebページのさまざまなUI要素をリキッドグラスにするエフェクトライブラリ -LiquidGlass

サイト構築 -制作

Post on:2026年9月30日

sponsorsr

Webページのさまざまな要素（カードやボタンなど）をリアルなガラスにするエフェクトライブラリを紹介します。

リキッドグラスのエフェクトは非常に美しく、屈折、ばかし、色収差、ライティングなども設定でき、かなりリアルなガラスを実装できます。

WebページのさまざまなUI要素をリキッドグラスにするエフェクトライブラリ -LiquidGlass

LiquidGlass
LiquidGlass -GitHub

LiquidGlassの特徴
LiquidGlassのデモ
LiquidGlassの使い方

LiquidGlassの特徴

LiquidGlassは、HTMLのさまざまな要素にリアルなガラスの屈折・ぼかし・色収差・ライティングといったリキッドグラス（Liquid Glass）エフェクトを適用する軽量のエフェクトライブラリです。

各ガラス要素の背後にあるDOMコンテンツをキャプチャし、マルチパス・レンダリング・パイプラインで処理した上で、その結果をWebGLシェーダーを使用してリアルタイムで合成します。

MITライセンスで、商用プロジェクトでも無料で利用できます。

LiquidGlass

LiquidGlassは、ガラスの重ね合わせ（レイヤー状の合成）、動的なコンテンツ更新、ドラッグ可能なフローティングパネル、レスポンシブなリサイズに対応しており、画像、動画、Canvas、あるいは通常のHTMLなど、あらゆる背景要素と組み合わせて使用できます。

LiquidGlassのデモ

デモでは、LiquidGlassの美しいリキッドグラスのエフェクトを楽します。

まずは、Interactive Playgroundで、各パラメータがガラスの表現にどのような影響を与えるのかをリアルタイムで確認できます。ガラスのパネルはドラッグで移動されることもできます。

LiquidGlass

リキッドグラスの定番といえば、フロスト。

Frosted Panel

ダークもかっこいいですね！

Dark Glass

LiquidGlassではボタンモードも用意されています。
button: trueに設定すると、リキッドグラスの要素がホバーやクリックに反応するようになります。ホバーで明るくなり、クリックするとベベルがフラットになってシャドウが深くなります。

Button Mode

LiquidGlassの使い方

NMP経由でインストールできます。

npm install @ybouane/liquidglass

1	npm install @ybouane/liquidglass

また、インストールを飛ばして、CDNから直接インポートすることもできます。

import { LiquidGlass } from 'https://cdn.jsdelivr.net/npm/@ybouane/liquidglass/dist/index.js';

1	import { LiquidGlass } from 'https://cdn.jsdelivr.net/npm/@ybouane/liquidglass/dist/index.js';

ベースとなるコードは、下記の通り。

<div id="root">
  <!-- 背景画像（ガラスと兄弟関係にある要素、シェーダーでキャプチャ） -->
  <img class="bg" src="background.jpg" alt="">

  <!-- コンテンツ -->
  <h1 class="title">Hello World</h1>

  <!-- アニメーションコンテンツには、各フレームを再キャプチャできるように「data-dynamic」が必要 -->
  <div class="counter" data-dynamic>0</div>

  <!-- リキッドグラス要素 -->
  <div class="my-glass">Glass Panel</div>
</div>

<script type="module">
  import { LiquidGlass } from '@ybouane/liquidglass';

  const glassEl = document.querySelector('.my-glass');
  glassEl.dataset.config = JSON.stringify({
    floating: true,
    blurAmount: 0.25,
  });

  const instance = await LiquidGlass.init({
    root: document.querySelector('#root'),
    glassElements: [glassEl],
  });

  // Later, to tear down:
  // instance.destroy();
</script>

<h1 class="title">Hello World</h1>

<div class="my-glass">Glass Panel</div>

</div>

import { LiquidGlass } from '@ybouane/liquidglass';

const glassEl = document.querySelector('.my-glass');

glassEl.dataset.config = JSON.stringify({

floating: true,

blurAmount: 0.25,

});

const instance = await LiquidGlass.init({

root: document.querySelector('#root'),

glassElements: [glassEl],

});

// Later, to tear down:

// instance.destroy();

</script>

ルート用の非ガラスな子要素はhtml-to-imageを使用して非表示のキャンバス上にラスタライズされます。静的な子要素は一度キャプチャされてキャッシュされますが、data-dynamic属性（またはvideo属性）を持つ子要素はフレームごとに再キャプチャされます。

img, canvas, video要素は、ctx.drawImageを介して直接描画されます。これはhtml-to-imageよりも高速で、かつライブ動画のフレームをキャプチャする唯一の方法です。

各ガラス要素には、WebGLの描画結果を表示する子要素のcanvasが挿入されます。各ガラス要素について、パネルの位置に合わせてシーンを切り抜き（クロップ）、必要に応じてぼかしを適用した後、屈折、色収差、フレネル反射、複数の光源による鏡面反射ハイライト、内側のストロークリム、ドロップシャドウを適用するフラグメントシェーダーを実行します。

レイヤー合成のプロセスでは、ガラス要素の処理が完了するたびに、そのレンダリング結果であるガラス用キャンバスの内容が合成キャンバスに書き戻されます。そのため、重なり合うガラス要素で上の要素からは下の要素が屈折した表現で表示されます。

さらに詳しくは、ドキュメントをご覧ください。