Design · 3 min read
Glassmorphism and backdrop-filter: Frosted Glass in CSS
Glassmorphism is the frosted-glass look: a translucent panel that blurs whatever sits behind it. It is the style of macOS sidebars and iOS control centres, and in CSS it comes down to one property.
Try it yourself with the related tool.
Generate a glass effect →Advertisement
The recipe
Give the panel a semi-transparent background such as rgb(255 255 255 / 0.15), add backdrop-filter: blur(12px), a thin light border, and a soft shadow. The blur applies to content behind the element, not the element itself — so it only shows when there is something colourful behind it.
Readability first
Text on glass inherits whatever is behind it, so contrast changes as the page scrolls. Raise the background opacity or add saturate() and a slight tint until text passes contrast checks at the worst spot.
Performance and support
Backdrop blur is computed every frame for what is behind the element, so large glass areas can slow down scrolling on low-end phones. Use it on a few panels, not the whole page. All modern browsers support it; Safari needed the -webkit- prefix until recently, and a solid fallback background keeps old browsers readable.