A pane of frosted glass held above a colour. You cannot read what is behind it, but you can feel that something is there, and that is the entire effect.
Definition
Glassmorphism is one CSS property with a philosophy attached: backdrop-filter. A panel takes whatever is behind it, blurs it, boosts its saturation, and tints the result. The eye reads blur as distance, so the panel lifts off the page without a single drop shadow doing the heavy lifting.
Windows Vista had Aero in 2006 and it was mocked. iOS 7 brought it back in 2013 and it was the future. macOS Big Sur and Windows 11's Mica made it the default chrome of the operating system, and by 2020 every dashboard concept on the internet had a frosted card on a purple gradient.
The rules
Frosted glass over flat grey is just grey. The effect needs colour, motion or photography behind it — otherwise you have paid for a filter that shows nothing.
blur(20px) saturate(180%). Blurring alone washes the colour out; the saturation boost is what keeps it looking like glass rather than fog.
A single semi-transparent white border, plus an inset highlight on the top edge only. That is the light catching the bevel, and without it the panel has no thickness.
Two panes at the same blur read as one plane. Push the nearer pane to a heavier blur and a higher white and the hierarchy appears instantly.
Contrast against a blurred background is not fixed — it changes as the page scrolls. Either raise the tint opacity until the worst case passes, or put the text on a solid.
Specimen
Backdrop blur is one of the most expensive things you can ask a compositor to do, recalculated every frame anything moves beneath it. On a mid-range Android a full-screen frosted overlay is a measurable scroll-jank source. Use it on chrome and cards, not on everything.
It stopped being a trend and became infrastructure — the material of system toolbars, notification shades and command palettes. Apple's Liquid Glass in 2025 is the same idea given refraction and motion rather than a replacement for it.