shadertown

Glassmorphism that actually bends the light

Frosted panels, bent light, a bright edge where the sheet catches the lamp. Glassmorphism in CSS is a blur behind a translucent box; here it is glass that actually refracts what sits behind it, computed every frame.

What glassmorphism is

Glassmorphism is an interface style built on one idea: a surface you can see through, far enough out of focus that it reads as glass rather than as a window. The recipe is a translucent fill, a blur of whatever is behind it, a hairline border catching the light, and a soft shadow to lift it off the page. Apple shipped it across its own interfaces, which is why the style keeps coming back under new names.

Where backdrop-filter stops

backdrop-filter: blur() is the right tool for a glassmorphism card, and it costs nothing to write. What it cannot do is bend light. A blur averages the pixels behind the panel; it does not refract them, so a straight line behind the glass stays straight, the edges never gather a caustic, and the sheet has no thickness. Those are the cues that make glass read as glass.

A shader has the whole scene to sample, so it can offset each pixel by the surface normal it computes — which is refraction, and it is the same arithmetic whether the sheet is flat or curled. The panel above is one fullscreen quad doing exactly that.

Glassmorphism, neumorphism, liquid glass

The three get compared because they answer the same question differently. Neumorphism extrudes the control out of the background with two shadows and no transparency. Glassmorphism floats it above the background and lets the background through. Liquid glass is glassmorphism with the refraction put back — the sheet has depth, and light bends as it crosses. That last one is what a shader is for.

Put glass over your own page

Every shader here tunes free in the browser. Point the glass at an image, a video frame, or another shader, and drag the sliders until it is yours.