Recreate Figma's liquid glass effect on the web. The same controls — depth, dispersion, frost, splay, refraction — rendered in WebGL2, on any shape, in every modern browser. Drag a shape onto any image, tune the sliders, watch it react in real time. Then hit Copy prompt: you get a complete brief — the numbers, the shape path, the full shader pipeline — to paste into any AI assistant and rebuild it on your own site. One shader. No framework, no dependencies. Free and open source.

Hi PH 👋 I kept seeing Figma's Glass effect in design mocks and hitting the same wall: there was no way to actually ship it on the web. CSS blur gets you frosted panels, not refraction. So I rebuilt the whole thing as a single WebGL2 fragment shader — distance transform, height field, Sobel normals, spectral dispersion. No framework, no dependencies. The part I'm most proud of: Copy prompt. Tune the glass until it looks right, and it hands you a complete brief — settings, shape path, shader pipeline — that any AI assistant can use to rebuild the exact look on your own site. Built solo over a lot of late nights. It's free and open source, and it stays that way — a star on GitHub is just how I know it was worth it. https://github.com/Miftahul-Isla...

Liquid Glass

Real liquid glass on the web — one WebGL2 shader, no deps.

Real liquid glass on the web — one WebGL2 shader, no deps.