0Original
No material. The text competes with the background and is barely readable.
Full recipe
You can move the panel with the arrow keys when it is focused.
Resulting CSS
Built layer by layer
The same panel adding one layer per cell. It uses the appearance and background you picked above, so you can see how each step changes with what's behind it.
1Blur
A 24 px gaussian. It strips the detail, but the result looks gray and washed out.
2180 % saturation
The blur mixes neighboring colors and desaturates them. Raising saturation brings it back to life.
3Tint
A light (or dark) layer locks in the base contrast and makes the text readable.
4Grain
Fine noise that breaks the banding of blurred gradients.
5Border and highlight
A 0.5 px hairline and a line of light along the top edge.
6Shadow and corners
A two-layer shadow and continuous corners instead of a circular arc.
7Vibrancy
The text blends with the background (multiply in light, plus-lighter in dark) and takes on its color.
Things to try
Turn saturation off in Landscape
Without it the blur turns the sky a dull gray. At 180 % the sun's orange survives the blur.
Drop the tint to zero in App
The text behind stays almost readable through the glass. The tint isn't decoration; it's what guarantees contrast.
Turn on Vibrancy in dark
Labels stop being flat gray and take on the background's color. Easiest to see over Mosaic.
Remove the border and highlight
Each one weighs little on its own, but without them the panel loses its edge and reads as a smudge instead of an object.
The thicknesses are approximations calibrated by eye, not the system's internal values. The closest public reference is the sample code UIImageEffects, which uses a saturation of 1.8 and a tint alpha between 0.3 and 0.82 depending on the style. CSS's blur() is a standard deviation, so it doesn't map one-to-one to the blur radius of those functions.
Frequently asked questions
What is glassmorphism?
It's a UI style that mimics frosted glass: translucent panels that blur what's behind them, with a subtle tint, a thin border and an inner highlight. Apple popularized it in iOS 7 and it's still present in iOS 18, macOS and visionOS.
How do you create the frosted glass effect in CSS?
With the backdrop-filter property. The minimal recipe is backdrop-filter: blur(24px) saturate(180%) plus a translucent background-color in rgba for the tint, and a 0.5 px border with an inner highlight to define the panel's edge.
Which browsers support backdrop-filter?
All modern browsers: Chrome, Edge, Safari (with the -webkit- prefix) and Firefox. In older browsers the panel shows without the blur, so make sure the tint alone guarantees text contrast in case the filter isn't applied.
Why isn't my backdrop-filter showing?
Almost always because of the stacking context. If an ancestor has transform, opacity below 1, filter or z-index, Chromium treats that element as the backdrop root and the blur stops seeing what's behind. Avoid those values in the panel's ancestor chain.