Lisbon
24°
Air quality
Good · 21
Frost needs a loud wallpaper — the color IS the palette
Glassmorphism
Industry-coined trend
Coined by Michal Malewicz in 2020 as a trend label for a much older frosted-glass effect (Windows Vista Aero, iOS 7 blur, macOS vibrancy).
also called frosted glass UI, glass UI, frosted panels
Glassmorphism builds interfaces from translucent, frosted panels: the background — usually something vivid — blurs through each surface, a thin light border catches the 'edge' of the glass, and layers stack with soft shadows to sell the depth. The style lives or dies by its backdrop: over a plain background the glass reads as plain grey; over a colorful gradient it glows.
Scope: Covers the generic frosted-glass content style. Apple's system-wide adaptive material is Liquid Glass (its own entry), and the older macOS behind-window blur is vibrancy — a UI term, not a style.
If you called it…
…you meant Glassmorphism.
What makes it this — the defining signals
- Frosted translucent panelsSurface & material
Surfaces are semi-transparent with a strong background blur — content behind is visible but softened, like frosted glass.
- Vivid backdrop showing throughColor & contrast
A colorful gradient, photo, or aurora sits behind the glass; its color bleeds through every panel and IS most of the palette.
- Thin light edgeGeometry & borders
A 1px semi-transparent white border (often brighter on top) catches the rim of each panel, separating glass from glass.
- Layered floating depthDepth & light
Panels float above the backdrop and above each other with soft, wide shadows — the stack of sheets is part of the look.
Style brief — paste into your agent
Create the surface using glassmorphism. Defining signals: semi-transparent panels with a strong backdrop blur; a vivid gradient or photographic backdrop whose color bleeds through every panel; a thin 1px semi-transparent white border on each panel edge; layered floating depth with soft wide shadows. Keep the backdrop's specific colors and imagery flexible. Use CSS backdrop-filter: blur(16px) with background: rgba(255,255,255,0.12) (or a dark equivalent) and border: 1px solid rgba(255,255,255,0.25). Do not drift into Apple's Liquid Glass; the decisive difference is that glassmorphism is a decorative skin for any surface including content cards, while Liquid Glass reserves glass for the floating control layer above content. Preserve readable text over every region the backdrop can produce (add a contrast scrim if needed), visible controls and focus states, and reduced-motion/reduced-transparency fallbacks.
Often confused with Liquid Glass
The same little app, rendered in both styles — only the style changes, so the difference you see IS the difference.
Welcome back
Pick up where you left off.
Glassmorphism
Welcome back
Pick up where you left off.
Glassmorphism
This is glassmorphism because the frosted treatment is a generic decorative skin — content cards, dashboards, whole panels can all be glass over a wallpaper you chose.
It would become Liquid Glass if the glass were reserved for the CONTROL layer — bars, buttons, navigation floating above app content — using Apple's adaptive material that lenses and re-tints from whatever scrolls beneath it.
vs Neumorphism: This is glassmorphism because panels are translucent and depend on a colorful backdrop blurring through. It would become neumorphism if every panel went opaque and matte in the background's own color, with soft dual shadows doing all the work.
Full style DNA
Surface & material
Surfaces are semi-transparent with a strong background blur — content behind is visible but softened, like frosted glass.
Solid cards (or transparency without blur) lose the frosted read — transparency alone is just low opacity, not glass.
Color & contrast
A colorful gradient, photo, or aurora sits behind the glass; its color bleeds through every panel and IS most of the palette.
Geometry & borders
A 1px semi-transparent white border (often brighter on top) catches the rim of each panel, separating glass from glass.
Depth & light
Panels float above the backdrop and above each other with soft, wide shadows — the stack of sheets is part of the look.
Typography
Text and icons are usually white or near-white with slight transparency steps for hierarchy.
Imagery & ornament
Gradient mesh, aurora, photography, or brand color field — any vivid, soft backdrop works; the glass recipe stays the same.
In code — optional starting points
The brief above is framework-neutral; these are concrete handles if your stack matches.
| CSS | background: rgba(255,255,255,.12); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.25); border-radius: 16px; | The core glass panel recipe |
| CSS | @supports not (backdrop-filter: blur(1px)) { background: rgba(30,30,40,.85); } | Fallback: without blur support, go near-opaque |
| SwiftUI | .background(.ultraThinMaterial) | System material ≈ frosted panel (see also Liquid Glass) |
Accessibility & misuse
- Text contrast over glass is unstable: the backdrop moves and varies, so measure against the worst region or add a translucent contrast scrim behind text.
- Honor prefers-reduced-transparency (and OS 'Reduce transparency') with near-opaque fallbacks.
- backdrop-filter is expensive on low-end devices; the layout must survive its absence — never hide content behind a failed blur.
Origin
The effect is decades old — Windows Vista's Aero glass (2006), iOS 7's blur layers (2013), macOS vibrancy — but the style label dates to Michal Malewicz's 2020 article, after the look spread through Dribbble and Big Sur-era redesigns.