Liquid glass, everywhere at once

Apple gave its interface material a name, and the name stuck. "Liquid glass" is a thick, clear slab with rounded edges that bends whatever sits behind it, catches a bright line of light along its rim and splits the edges into a faint rainbow. Over the summer it jumped from phones to everything else: Webflow showcased a Three.js build that refracts a real page through the glass, two open-source web versions (Liquid DOM and a WebGL one) did the rounds on X, and there is now an After Effects plugin for it. Trend reports from Senate Media and Videobolt both list glass shapes and dispersion among the looks defining 2026 motion design.

Why it works

Glass makes anything underneath it feel expensive. The refraction gives a flat backdrop depth, the specular rim gives the shape an edge the eye can follow, and the little colour fringe is the tell that says "real material" rather than "blur filter". The morph, pill to circle to rounded square, is what turns a static effect into motion design.

How this ingredient gives it to you

Liquid Glass is the slab itself, as working Three.js code. It refracts an opaque backdrop (colour bands, a word, a logo, a photo plane), with Glass thickness, Bend of light and Colour fringe as the controls that change the look most. Morph between shapes cycles the pill, circle and rounded square over the clip, and Glide and Tilt move it; everything is a pure function of time, so the clip loops exactly. The three presets are a clear pill over bands, a frosted pill over a gradient and a thick lens over a dot grid.

Combine it with Kinetic Title on the backdrop so letters refract as they rise, or drive the slab with Orbit Camera for a slow pass over a product shot.

Good to know

Glass only shows what is opaque behind it, so put your backdrop on a solid plane, not a transparent one. The slab morphs between rounded shapes; it does not pour or drip like a real liquid.