Liquid Glass

Glassmorphism blurred what was behind it. This bends it. The material has a curved edge, so light entering it is refracted, split and thrown back at you.

Definition

An optical material, not a fill

Apple introduced Liquid Glass across every platform in 2025 — the largest visual overhaul since iOS 7 flattened everything in 2013. The claim is that controls are made of a real optical substance rather than painted to look translucent. It refracts the content beneath it rather than merely blurring it, carries a live specular highlight that responds to motion, and it deforms: tap a control and it stretches, absorbs a neighbour, and settles like a drop of water.

The functional argument is that chrome can now shrink. If a toolbar is genuinely transparent and genuinely bends the content under it, it can float over the page instead of stealing a strip of it — which is how you get an app whose content runs edge to edge with the controls hovering above.

The rules

How it is actually built

1
The edge does the refracting, not the middle.

Blur stays low in the centre so content underneath is still readable. Distortion, brightness and chroma all ramp up in the last few pixels before the border.

2
Chromatic split at the rim.

A cool inset shadow on one edge, a warm one on the other. Real glass separates wavelengths; this is the cheapest convincing imitation of it.

3
One live specular highlight.

A soft bright patch tied to pointer position or device tilt. Static glass is a screenshot of glass — the highlight is what makes it feel wet. Move your pointer across any panel here.

4
Shapes are capsules, and concentric.

Fully rounded pills, and any nested radius derives from the parent so the curves stay parallel. Sharp corners cannot refract.

5
Legibility is adaptive, not fixed.

The material samples what is beneath it and shifts its own tint light or dark to keep the label readable. Without that fallback the whole thing fails over a busy photograph — which is exactly the complaint the first betas got, and why the shipping version dials the effect back over dense content.

Specimen

A lens you can push around

Drag the bar
HomeSearchLibrary
Low blur in the middle, heavy chroma at the rim — the colour beneath stays visible, it just bends.

The complaint

The first developer betas were widely called illegible — white text on a translucent bar over a bright photograph is a contrast lottery. Apple spent the summer adding opacity, and the shipped material is noticeably more frosted than the one announced. The lesson is old: transparency is a promise you have to keep against content you do not control.

On the web

You can get most of the way with backdrop-filter, layered inset shadows and a pointer-driven highlight, as on this page. True per-pixel refraction needs an SVG displacement map or a WebGL pass, which costs a compositor layer per element. Reserve it for one hero control.

The other eight