日本語

Liquid Glass Generator

Recreate Apple's Liquid Glass with WebGL. Tune refraction, chromatic aberration, and frosted blur, then export copy-paste code.

Drag on the preview to move the glass

Generated code

HTML (paste where you want the button)
JavaScript (save as liquid-glass.js)

※ Paste the HTML where you want the button (it includes a <script> that loads the external JS). Save the JavaScript as liquid-glass.js and adjust the src path to match where you place it. Replace the background URL with your own image. It loads the lightweight ogl library from a CDN.

For how to use it, the WebGL vs. CSS difference, and FAQ, see the how-to guide.
Need a CSS/SVG version? Try the Liquid Glass CSS Generator.