English

Liquid Glass ジェネレーター

AppleのLiquid Glass（液体ガラス）をWebGLで再現。屈折・色収差・すりガラスを調整して、コピペできるコードを生成します。

プレビュー上でドラッグするとガラスを移動できます

生成されたコード

HTML（設置したい場所に貼り付け）
JavaScript（liquid-glass.js として保存）

※ HTMLは設置したい場所に貼り付け（外部JSを読み込む <script> 付き）。JavaScriptは liquid-glass.js として保存し、HTMLの src のパスを設置場所に合わせてください。background のURLはご自身の画像に差し替え。軽量ライブラリ ogl をCDNから読み込みます。

使い方・WebGL方式とCSS方式の違い・FAQは使い方ガイドをご覧ください。
CSS/SVG版が必要なら透過リキッドガラスCSSジェネレーターもあります。