Your browser couldn't create a WebGL context, so there's no glass to show. Try a recent Chrome, Safari, Firefox or Edge.
A real optics demo — no backdrop-filter
Every panel below is refracted per-pixel in GLSL: a rounded-rectangle signed distance field gives the surface normal, Snell's law bends the background through a lens-shaped bevel, and the rim splits into chromatic aberration with a directional specular. Drag the panels. The text floats above the canvas — exactly like iOS, only the background bends.
Each card isolates one optical parameter. Drag them over bright and dark parts of the scene — the bevel is where the physics lives.
The big panel is live. Move the sliders and watch the exact GLSL on the right — that's the code running under it, syntax-highlighted.
Every slider maps to one uniform in the fragment shader beside this panel.
The left card is the GLSL glass. The right card is what most "liquid glass" demos actually are: backdrop-filter: blur(). Toggle the left one to CSS mode and the difference is unmistakable — uniform blur has no lensing, no dispersion, no light.
Per-pixel normals, Snell bend, chromatic rim.
Real shader.
One uniform blur. No lens, no dispersion.
CSS fake. Flat blur — the edge tells the whole story.