Glassmorphism.
Learn what Glassmorphism means in modern web design.
A visual style that uses translucent surfaces, background blur, and subtle borders to create a frosted-glass effect — popularized by macOS Big Sur and iOS 7+ in 2020-2021.
Glassmorphism uses CSS backdrop-filter: blur() (or the platform equivalent) to make foreground panels translucent over a colorful background. The result reads as layered, depth-rich, and tactile while still feeling modern. Apple's macOS Big Sur and Windows 11 Fluent both lean heavily on the style.
When It Works
Glassmorphism shines when there's a vivid or colorful background to blur — gradient hero sections, marketing splash pages, dashboard overlays sitting on top of charts. It fails on plain white backgrounds where the "frosted" effect has nothing to refract.
Performance Cost
backdrop-filter is GPU-expensive. Used heavily on low-end mobile devices it can drop frame rates and hurt Core Web Vitals scores. Always test on representative hardware and gate the effect behind a prefers-reduced-motion or capability check.
Related Terms
Ready to close the loop?
See every term in action
Aergos tracks your AI and organic visibility across every channel, in one platform.
Not ready to talk? Audit your site free →