Demos / Glassmorphism

Glass, on real glass.

backdrop-filter: blur() is what makes the iPadOS Control Center, the Dock, and Safari's own toolbar look the way they do. Here's a mock-up that uses it the same way.

Blurring the layer behind Blur Saturation

Now playing

A song that doesn't exist · An artist who hasn't recorded

The single line that does the heavy lifting

backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);

Sliders update the CSS variables on the stage in real time, so you can see what falls off at very low blur (the panel reads as a flat tint) and very high blur (everything behind dissolves into color).

Pair with isolation: isolate on the parent so the blur only samples siblings inside the stage, not the page behind it.