Liquid Glass Lab
Real refraction, not just blur.
An Apple-style liquid glass material built on SVG displacement filters. The surface bends, magnifies, and color-fringes whatever sits behind it — strongest at the rim, subtle at the center, like looking through a water droplet.
Drag the glass card around and watch straight lines bend at its rim.
Drag me over the stripes
Rim bends, center stays calm.
How it works
01
Lens displacement map
A canvas renders the glass shape as a vector field: red encodes horizontal offset, green vertical, neutral gray means no shift. Magnitude ramps up near the border and fades to zero at the center — Spread controls the band, Depth the curvature.
02
Refraction with dispersion
feImage feeds that map into feDisplacementMap, which bends the backdrop through it three times — once per RGB channel at slightly different scales — and screen-blends the results. The mismatch paints rainbow fringes exactly where distortion peaks: the rim.
03
Liquid wobble and frost
feTurbulence adds a subtle organic ripple over the refracted image and feGaussianBlur frosts it. The whole chain runs as one CSS backdrop-filter: url(#filter), so the glass live-refracts anything that scrolls or moves behind it.