Glassmorphism Pattern

Create frosted glass effects for overlays and floating UI elements.

Core Classes

// Standard glassmorphic container <div className="bg-black/20 backdrop-blur-md border border-white/10"> ... </div>

Variations

Dark Overlay (on images/media)

Best for controls overlaid on images or video.

<div className="bg-black/20 backdrop-blur-md border border-white/10 rounded-full px-3 py-2"> {/* Content */} </div>

Light Overlay (on dark backgrounds)

<div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3"> {/* Content */} </div>

Subtle Glass (minimal effect)

<div className="bg-black/10 backdrop-blur-sm border border-white/5 rounded-lg px-3 py-2"> {/* Content */} </div>

Strong Glass (prominent effect)

<div className="bg-black/40 backdrop-blur-lg border border-white/20 rounded-2xl px-5 py-4"> {/* Content */} </div>

Token Reference

Property Light Glass Standard Strong

Background bg-black/10

bg-black/20

bg-black/40

Blur backdrop-blur-sm

backdrop-blur-md

backdrop-blur-lg

Border border-white/5

border-white/10

border-white/20

Common Use Cases

Carousel Indicators

<div className="absolute bottom-3 left-1/2 -translate-x-1/2"> <div className="flex items-center gap-2 px-3 py-2 rounded-full bg-black/20 backdrop-blur-md border border-white/10"> {/* Indicator dots */} </div> </div>

Floating Action Button

<button className="fixed bottom-6 right-6 p-4 rounded-full bg-black/20 backdrop-blur-md border border-white/10 hover:bg-black/30 transition-colors"> <Icon className="w-6 h-6 text-white" /> </button>

Tooltip/Popover

<div className="absolute top-full mt-2 px-3 py-2 rounded-lg bg-black/30 backdrop-blur-md border border-white/10"> <span className="text-white text-sm">Tooltip content</span> </div>

Navigation Bar (over hero)

<nav className="fixed top-0 left-0 right-0 z-50 bg-black/10 backdrop-blur-md border-b border-white/10"> {/* Nav content */} </nav>

Text Contrast

When using glassmorphism, ensure text has sufficient contrast:

Background Opacity Text Color

bg-black/10

• bg-black/20

text-white or text-white/90

bg-black/30

• bg-black/40

text-white

bg-white/10

• bg-white/20

text-white or text-zinc-100

Performance Note

backdrop-blur can impact performance on lower-end devices. Consider:

• Using smaller blur values (backdrop-blur-sm ) for frequently updated elements

• Avoiding large glassmorphic areas that cover significant viewport

• Testing on mobile devices

Checklist

• Background has transparency (e.g., bg-black/20 )

• backdrop-blur-* applied for frosted effect

• Subtle border with transparency (border-white/10 )

• Text has sufficient contrast

• Border radius matches design language

• Tested on lower-end devices for performance