Translucent panels, colorful gradient backgrounds, and soft blur effects. The design language Apple brought mainstream with macOS Big Sur — now everywhere in fintech, wellness, and consumer apps.
What Is Glassmorphism?
Glassmorphism is a design style that simulates frosted glass — translucent panels with a blur effect placed over colorful gradient backgrounds. Apple popularized it with macOS Big Sur in 2020, and it spread rapidly through consumer apps, fintech products, and mobile interfaces.
The defining experience: a card that looks like a pane of frosted glass, slightly see-through, with a soft glow at the edges from the colorful gradient behind it. It feels physical, premium, and inviting.
The Vibe
Frosted glass held up to the light.
Soft gradients bleed through translucent surfaces. Orbs of color drift in the background. Cards seem to float above the page. It communicates: this product is premium, modern, and pleasant to use — before the user reads a single word.
Who Is Using It?
Apple (iOS, macOS), Revolut, Robinhood, Calm, and countless fintech and wellness apps. It is the dominant aesthetic for consumer-facing mobile products and premium SaaS landing pages targeting non-technical audiences.
When Should You Use It?
Use it when:
- Your product is consumer-facing (finance, wellness, lifestyle, entertainment)
- Your audience responds to visual polish over utilitarian clarity
- You want a modern, Apple-adjacent premium feel
- Your primary platform is mobile or tablet
Avoid it if your product is developer-facing, data-heavy, or accessibility-critical. The frosted blur effect reduces contrast, which can fail WCAG guidelines and frustrate users with visual impairments.
Design Rules (Deep Dive)
The Background Is the Foundation
Glassmorphism doesn't work without a strong background. You need a colorful gradient — soft purples, sky blues, warm pinks — as the base layer. Then add large, blurred color orbs (border-radius: 50%, filter: blur(80px), low opacity) to create depth. This is what the glass reflects.
The Glass Formula
Every glass card needs four things working together: translucent white fill (rgba(255,255,255,0.2-0.35)), backdrop blur (blur(12-20px)), a light border (1px solid rgba(255,255,255,0.4)), and a soft shadow. Miss any one and it stops reading as glass.
The inner highlight — inset 0 1px 0 rgba(255,255,255,0.6) on the top edge — is the detail that elevates a decent implementation to a great one. It simulates light hitting the top edge of a glass panel.
Depth Through Layers
The most polished glassmorphism designs have three distinct depth layers: the background gradient, floating color orbs in the mid-layer, and foreground glass cards. Each layer should feel spatially distinct. Cards in the foreground should have stronger blur and lighter fill than mid-layer elements.
Typography on Glass
Text on glass needs to be darker than you think. Deep navy (#1E1B4B) or dark indigo works far better than pure black or gray, which can feel cold against warm gradients. Keep font weights in the 400-600 range — heavy weights fight against the softness of the aesthetic.
The Accessibility Caveat
This is the most important limitation to understand. Frosted blur over gradient backgrounds frequently fails WCAG AA contrast ratios. If your product needs to be accessible, either add a more opaque backing to text areas or choose a different style. Glassmorphism is a visual luxury, not an accessibility-friendly default.