Creates frosted glass UI elements with blur, transparency, and subtle borders. Use when building overlays, floating controls, tooltips, or any element that should appear elevated with a translucent background.

Glassmorphism Pattern Create frosted glass effects for overlays and floating UI elements. Core Classes Variations Dark Overlay (on images/media) Best for controls overlaid on images or video. Light Overlay (on dark backgrounds) Subtle Glass (minimal effect) Strong Glass (prominent effect) 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 Floating Action Button Tooltip/Popover Navigation Bar (over hero) 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