Liquid Glass on the web — is it worth copying the iOS 26 look

Apple shipped Liquid Glass in iOS 26 — glass that refracts the background instead of just blurring it. Since May, Twitter and Behance have been flooded with attempts to bring this look to the web. Half look like old glassmorphism with new wrapping paper. The other half are interesting. Here is what is actually viable.

How it differs from regular frosted glass

Old glassmorphism was one property: backdrop-filter: blur(). Matte glass, flat, predictable. Liquid Glass adds two more layers on top:

• Background distortion — pixels under the element are not blurred, they are displaced, as if seen through a lens of variable thickness
• Edge refraction — a thin light band runs around the perimeter, mimicking light bending across a convex surface
• Motion response — on scroll or animation the glass shimmers, shifting the distortion against the background

How to build it in CSS

Backdrop-filter alone cannot refract. You need a stack:

1. backdrop-filter: blur(12px) saturate(160%) — the baseline blur
2. An SVG filter with feDisplacementMap on top — this gives the distortion. The displacement map comes from feTurbulence at low frequency, so you get smooth waves and not noise
3. A thin border with rgba(255,255,255,0.18) and an inset box-shadow — fakes the edge refraction
4. A light conic gradient on top as a specular highlight

Performance is its own story. SVG filters over large areas kill FPS on mid-tier Android. On an M-series MacBook it flies. On a Galaxy A52 you already see scroll stutter.

Where it works and where it does not

Liquid Glass needs a rich background. Over a solid colour or a white canvas the effect disappears — there is nothing to refract. It only works when the layer underneath is a video, a gradient, or an image with detail. That kills 80% of corporate landings with white backgrounds and black text.

Fits well: heroes with photo backgrounds, a player over album art, a map overlay in navigation, a modal over a dashboard with charts. Does not fit: forms, long text, anything you read for more than five seconds. Text over Liquid Glass tires the eye fast — micro-motion behind the letters keeps stealing focus.

Accessibility

WCAG asks for 4.5:1 contrast on body text. On glass with a shifting background, contrast floats. The same paragraph can pass at the top of the scroll and fail at the bottom. The only fix is a semi-opaque safety layer under the text — which kills half the effect. So either glass without text (decor, icons, buttons with heavy strokes), or an honest matte background and forget the look.

What we have done with it

Built a landing for a premium furniture brand in April. Behind the hero ran an interior video, with navigation and CTA on Liquid Glass on top. The effect landed, the client was happy. But we had to ship a fallback for Android devices with GPUs weaker than Adreno 660 — there the SVG distortion drops out and only blur remains. We sniff this via navigator.deviceMemory and navigator.hardwareConcurrency. Not perfect, works in practice.

Second project — a SaaS dashboard. We tried Liquid Glass on modals. We ripped it out a week later. Users complained about a strange shimmer when filling forms. What delights on a marketing landing annoys in a product interface.

Worth pulling in

If you have an image-driven landing with a media background and budget for a performance fallback — yes, it stands out right now. Corporate site, SaaS, or shop — skip it. Within a year the look will leak into system design libraries (Material 4 and Fluent 3 are circling), and then it becomes as cheap as shadows and rounded corners are today.