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.
Create frosted glass effects for overlays and floating UI elements.
// Standard glassmorphic container
<div className="bg-black/20 backdrop-blur-md border border-white/10">
...
</div>
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>
<div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3">
{/* Content */}
</div>
<div className="bg-black/10 backdrop-blur-sm border border-white/5 rounded-lg px-3 py-2">
{/* Content */}
</div>
<div className="bg-black/40 backdrop-blur-lg border border-white/20 rounded-2xl px-5 py-4">
{/* Content */}
</div>
| 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 |
<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>
<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>
<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>
<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>
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 |
backdrop-blur can impact performance on lower-end devices. Consider:
backdrop-blur-sm) for frequently updated elementsbg-black/20)backdrop-blur-* applied for frosted effectborder-white/10)Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer