Real CSS glass morphism, not the generic kind.
Everyone tries glass morphism. Most ship something that looks like a 2021 dribbble shot — washed out, low contrast, and oddly weightless. The recipes below are extracted from actual products: Apple's Liquid Glass, Vision Pro spatial UI, Material You, Stripe, and a premium dark surface. Each is layered, not just blurred.
Why most "glassmorphism" looks cheap.
- Just
backdrop-filter: blur— no saturation boost, so colors behind go grey and muddy - White at 10% opacity as the background — looks like fog, not glass
- No edge highlight — real glass catches light at its borders
- No shadow — flat against the surface, breaking the illusion of depth
- Boring backdrop — glass has nothing to refract; needs colors and contrast behind it
- One blur value forever — same on a button as on a fullscreen modal
Apple Liquid Glass — iOS 26 system UI
The look of every iOS 26 system surface — notifications, Control Center, system menus. Heavy blur, strong saturation boost, subtle inner highlight along the top edge. The key detail most miss: an inset white highlight that mimics how glass catches ambient light.
Notification
iOS 26 system surface
inset 0 1px 0 shadow is what makes this read as glass and not fog. It's a 1px white highlight along the top edge — every real glass surface has this. Remove it and the recipe falls apart.Vision Pro spatial glass
Apple's spatial UI on visionOS. Much more blur (40px+), slight brightness boost so the panel reads as luminous rather than transparent, and a bottom shadow that suggests it's floating above the world.
rgba(200, 220, 255, 0.04)) instead of pure white is what makes this feel like visionOS. Pure white reads "frosted shower glass". A 4% blue tint reads "spatial computing UI".Material You expressive glass
Google's Material 3 surfaces — softer, more opaque (35% rather than 5%), with a bigger border-radius and a colored shadow that picks up from the background palette. Used in Android 14+ quick settings, system dialogs, expressive components.
Quick Settings
Material You panel
Stripe checkout — dark glass
Stripe's payment forms and dashboards. A darker base (rgba 20,20,40,0.5 — almost opaque), heavier blur, lighter top border than bottom to fake a 3D bevel. Reads as structural, not decorative — appropriate for forms holding sensitive data.
Premium dark — luxury surface
For high-end products: dark background, gold or amber accent border, and a pseudo-element overlay with mix-blend-mode to add a subtle gold film over the glass. This is the recipe to use when "expensive" is the brief.
Pagassa
mix-blend-mode: overlay pseudo-element is the entire trick. It puts a 6% gold film over the panel that intensifies the underlying colors. Skip it and the panel becomes "dark card with gold border". Add it and the panel reads as "gold-anodized glass."A note on the iOS 26 quirk.
On iOS Safari, backdrop-filter sometimes flashes opaque on first paint — the blur takes one frame to kick in. Fix this by pre-promoting the glass element to a compositing layer with transform: translateZ(0). Without it, users see a half-second white flash before the glass appears. Tested and documented in the iOS Safari Bestiary under "backdrop-filter flashes opaque".
Also: always pair backdrop-filter with -webkit-backdrop-filter. Safari needs the prefix even in 2026. Drop it and your glass becomes a flat opaque div on iPhone.