Liquid Glass

In three steps

1. Pick the background. An animated aurora, a typographic poster, or your own photo. It never leaves your browser.
2. Lay the glass. A lens, a pill, a card, merging drops — or your word, your logo, turned into glass. Then a one-click look (Clear, Frosted, Prism, Water, Mercury…) and fine-tune: refraction, magnifier, colour dispersion, frost, tint, highlights, shadow.
3. Take it with you. The PNG image is free, no account. The code comes with a subscription: one single block to paste, the engine is inside, nothing to upload next to it.

Put the effect on your website

The block to paste

The Copy the block button puts a complete HTML block in your clipboard: the frame, the engine (about 35 KB) and your settings, your images included. Paste it anywhere — a hero, a section, a card — and reload. There is nothing else to install: no library, no file to upload.

The standalone page

A single file that works on its own, offline too. To embed it untouched, call it in an iframe:

<iframe src="effect-labs-liquid-glass.html" style="width:100%;height:480px;border:0"
        title="liquid glass" loading="lazy"></iframe>

Edit it later

The settings are written in clear at the end of the block: change the tint, the refraction or the shape right in the code, without coming back here.

How it is made

A real curved glass bends light where its surface slopes: barely in the middle, strongly at the edge. That is what gives Apple’s glass that rim which “pulls in” what lies behind it, while the centre stays sharp.

The tool describes the shape as a signed distance: for each pixel, the distance to the edge, negative inside. Its slope gives the edge direction; a rounded profile turns that distance into the slope of the glass, and the slope shifts where the background is read. Reading the background three times, slightly shifted for red, green and blue, splits the colours like a prism. Two nearby shapes melt into each other through a smooth minimum: that is what makes the drops liquid.

// The shape is a signed distance: negative inside, positive outside
float d = sdBox(p - centre, halfSize, radius);
// Its slope gives the edge direction; the curved rim bends the light
float rim = 1.0 - clamp(-d / thickness, 0.0, 1.0);    // 1 at the edge, 0 in the middle
vec2 offset = normal * refraction * slope(rim);
// Three reads of the background, one per colour: that is dispersion
vec3 c = vec3(background(uv + offset * 1.1).r,
              background(uv + offset).g,
              background(uv + offset * 0.9).b);

Your logo takes the same path: its outline becomes a distance map in your browser, then it is treated like any other shape. Everything is drawn with hand-written WebGL, with no Three.js and no library at all.

What works, what does not

• A detailed background — text, a sharp photo, lines — shows the refraction best. Over a flat colour, the glass bends nothing visible: raise the highlights or add contour lines.
• A bold logo renders better than a thin one: the curved rim needs material. For a thin stroke, lower the edge thickness.
• To put text on top, pick the Frosted look or raise the tint: clear glass lets too much detail through for legible text.
• On a phone, the drop follows the finger. Visitors who reduce motion get a still glass.

Frequently asked questions

Is the tool free?

The preview, every setting and the PNG export are free, with no account. Only the code export needs a subscription.

Are my images sent anywhere?

Not while you tweak: everything happens in your browser. They are only sent when you export the code, resized, to be embedded in the block — and they are not kept.

How heavy is the effect on my page?

The engine is about 35 KB, with no library. With a photo as background, count 100 to 250 KB in total; with a generated background (aurora or poster), nothing more. Nothing is loaded from a third-party server.

Does it work on iPhone, Firefox and Safari?

Yes. The glass is drawn with WebGL, which every recent browser supports — unlike CSS “backdrop-filter” with SVG filters, which only works in Chrome.

Does it work on WordPress, Webflow or Framer?

Yes: the block pastes into any HTML module. It needs no file next to it.

What about accessibility?

The drawing is decorative and hidden from screen readers. Visitors who reduce motion get a still glass; visitors who reduce transparency get a more opaque, more legible glass.

See also: glass effects, animated backgrounds and the other generators.