Question 1

Can you get Figma's liquid glass effect in the browser?

Accepted Answer

Yes, but not with CSS alone. Figma's Glass effect is screen-space backdrop refraction with chromatic dispersion. CSS backdrop-filter cannot displace the backdrop, and the common SVG feDisplacementMap workaround only works in Chromium. This tool renders the effect in WebGL2, so the same Depth, Dispersion and Frost values produce the same result in any browser with WebGL2.

Question 2

Why does the glass look invisible on my background?

Accepted Answer

Glass refracts whatever is behind it. On a flat, uniform colour a displaced backdrop looks identical to the original, so the effect is invisible. This is true in Figma too. Use a photo or a high-contrast edge behind the shape.

Question 3

Does the liquid glass effect work in Safari and Firefox?

Accepted Answer

This implementation works in any browser that supports WebGL2, including Safari and Firefox. CSS and SVG filter approaches to liquid glass generally do not, because backdrop-filter ignores SVG displacement filters outside Chromium.

Background image

Paste a shape from Figma

Save or load settings