Side navigation
Figma default — the calibration reference. Pick an icon.
Depth, dispersion, frost, splay, refraction — the same five controls you know from Figma, rendered live in WebGL2 on any shape you draw.
Free and open source. A star is the whole thank-you I'm after.
One backdrop, twelve pieces of glass, twelve different recipes. The label under each piece names the preset it uses — and all of it is clickable, so you can watch the material react.
Figma default — the calibration reference. Pick an icon.
A razor-sharp lens over a heavy frosted sheet. Click the bar, or press ⌘K, to open and close it.
Maximum colour next to near-zero colour. Both toggle.
Thick rounded rim, strong bend, almost no haze. Opens a hazier menu.
Restrained enough to sit behind real navigation. Try a segment.
Drag the slider, flip the switch. Liquid metal against cut crystal.
Deepest tint on the board, with a bright-rimmed button on top.
Refraction reads the light behind the panel, so the surface changes as the backdrop moves. Nothing here is a static image.
Figma's glass effect bends the backdrop behind a shape. CSS can blur that backdrop, but it cannot bend it — so handed-over designs never quite match. This renders the real thing in a shader.
Use the built-in shapes, draw your own, or paste SVG straight out of Figma. The glass takes that outline exactly.
The controls are calibrated against Figma's, so a value copied from the design panel lands on the same result here.
Export the config, or copy a ready-made prompt that carries your settings into your own project.
Free, no sign-up, runs entirely in your browser.
No framework, no dependencies — one WebGL2 shader, built solo over a lot of late nights. It stays free either way. A star is just how I know it was worth it.
Star on GitHub