Operating System2020 – Present
iOS 14 Widgets & Blur
Vibrant widget stacks with system-wide vibrancy and blur.
2020 – 2022 · Frosted glass & layered depth
Glassmorphism
Frosted glass, transparency, and layered depth
A design trend using backdrop blur, transparency, and vivid backgrounds to create frosted glass panels with depth and lightness.
Glassmorphism
2020 – 2022
Material note
Frosted glass requires vivid content behind the pane. Toggle switches and sliders demonstrate live blur over the animated mesh — the defining Big Sur / iOS 14 interaction model.
Representative interfaces, products, and artifacts from this era
Frosted glass panels floating over vibrant backgrounds — depth through blur, transparency, and layered light.
Operating System2021 – Present
Windows 11 Mica Material
Mica backdrop material blurring desktop wallpaper through app chrome.
Operating System2020 – Present
macOS Big Sur
Rounded translucent sidebars and unified iOS-aligned iconography.
Website2021 – Present
Stripe Dashboard Concepts
Gradient meshes behind frosted analytics cards.
Software2023 – Present
visionOS Spatial UI
Floating glass panels in spatial computing environments.
Software2022 – Present
Discord Profile Effects
Animated gradient banners behind semi-transparent profile cards.
Historical Background
Glassmorphism applies frosted-glass effects — background blur, transparency, subtle borders, and vivid backdrops — to create layered, spatial interfaces. While blur effects existed earlier (Windows Aero, iOS blur), the 2020–2024 wave was driven by CSS `backdrop-filter` maturity, Figma glass effects, and Apple's macOS Big Sur and iOS design language. The trend offered visual richness without the accessibility pitfalls of neumorphism, though contrast challenges remained.
Timeline
- 2020
macOS Big Sur introduces glass UI
Apple revives translucent materials with refined blur and vibrancy effects.
- 2021
CSS backdrop-filter gains broad support
Web developers can finally implement frosted glass effects natively in CSS.
- 2022
Glassmorphism peaks in UI community
Dribbble, Behance, and design Twitter embrace glass cards over gradient backgrounds.
- 2023
Windows 11 Fluent Design matures
Microsoft's acrylic and mica materials bring glass effects to mainstream desktop UI.
- 2024
Integration into design systems
Glass effects become one technique among many rather than a dominant aesthetic.
Major Companies & Products
Apple
CompanymacOS and iOS vibrancy effects set the production-quality standard for glass UI.
Microsoft Fluent Design
ProductAcrylic and Mica materials in Windows 11 bring glass effects to desktop.
iOS Widgets
ProductHome screen widgets with blur and transparency popularized glass on mobile.
Stripe & Linear
CompanySaaS companies adopted subtle glass effects in marketing and product UI.
Key Visual Characteristics
- 1
Frosted glass panels with backdrop blur
- 2
Semi-transparent backgrounds (rgba)
- 3
Vivid gradient or photographic backdrops
- 4
Subtle white borders for edge definition
- 5
Layered depth with floating panels
- 6
Soft shadows combined with transparency
Why It Became Popular
It created visual depth without heavy shadows or skeuomorphic textures. CSS finally made it implementable on the web. Apple's endorsement legitimized it for production. It photographed beautifully in marketing and worked well over colorful hero sections and gradient backgrounds.
Why It Declined
Performance costs of backdrop-filter on lower-end devices. Readability issues over busy backgrounds. Dark mode implementation complexity. As AI-era dark interfaces and bento grids dominated, glass effects became one tool in a larger kit rather than the defining aesthetic.
What Replaced It
AI-first bento UI and adaptive interfaces that combine dark surfaces, modular cards, and selective glass accents rather than full-glass layouts.
Legacy & Long-Term Impact
Glassmorphism brought `backdrop-filter` into common CSS vocabulary. Apple, Microsoft, and major SaaS products retain glass effects in navigation bars, modals, and overlays. The trend proved that depth can be achieved through transparency, not just shadow.
Famous Examples
macOS Big Sur Control Center
2020
Frosted glass panels over wallpaper that defined modern glass UI.
iOS 14 Widgets
2020
Home screen widgets with blur and vibrancy on customizable wallpapers.
Windows 11 Start Menu
2021
Acrylic transparency with centered layout and soft rounded corners.
Interesting Facts
Glassmorphism requires content behind the glass to look good — it's inherently layered.
Safari and Chrome handle backdrop-filter with subtle rendering differences.
The trend is closely related to Apple's “vibrancy” API, which predates the glassmorphism label.
Pure glass UI is nearly impossible to implement accessibly without careful contrast testing.