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