8 min read
[DUMMY] Recreating Liquid Glass in the browser
Blur is not a lens. What actually sells the effect, and what genuinely cannot be done without Metal.
cssdesign
The mistake is reaching for a single backdrop-filter: blur(). Real glass is a tint, a blurred backdrop, an inset bevel, a gradient rim and a specular highlight — and the bevel sells thickness more than the blur does.
Filter order matters
Displacement has to run before the blur. Blur first and there are no crisp edges left to bend, so the panel just looks slightly brighter.