glassmorphism
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.
SKILL.md
Full skill instructions
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