Glassmorphism Advanced
Agent Workflow (MANDATORY)
Before implementation, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Check existing glass patterns
- fuse-ai-pilot:research-expert - Latest backdrop-filter support
After: Run fuse-ai-pilot:sniper for validation.
Overview
| Feature | Description |
|---|---|
| Blur Levels | sm, md, xl, 3xl |
| Opacity Layers | Multiple glass layers for depth |
| Colored Glass | Tinted with CSS variables |
| Borders | Subtle white/20 borders |
Critical Rules
- backdrop-blur required - No flat backgrounds
- Semi-transparent bg - Use bg-white/10, bg-black/40
- Subtle borders - border-white/20
- Shadow for depth - shadow-xl shadow-primary/10
- Dark mode variant - Always define both
Quick Reference
Base Glassmorphism
className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl"With Colored Shadow
className="bg-white/10 backdrop-blur-xl border border-white/20 shadow-xl shadow-primary/10"Blur Levels
| Level | Class | Use Case |
|---|---|---|
| Subtle | backdrop-blur-sm | Overlays on clean backgrounds |
| Medium | backdrop-blur-md | Cards, modals |
| Strong | backdrop-blur-xl | Primary surfaces |
| Maximum | backdrop-blur-3xl | Hero sections |
Layered Glass Stack
<div className="relative">
{/* Background layer - most blur */}
<div className="absolute inset-0 bg-white/5 backdrop-blur-3xl rounded-3xl" />
{/* Middle layer */}
<div className="absolute inset-2 bg-white/10 backdrop-blur-xl rounded-2xl" />
{/* Content layer - least blur */}
<div className="relative bg-white/20 backdrop-blur-md rounded-xl p-6">
{children}
</div>
</div>Dark Mode
/* Light mode */
className="bg-white/80 backdrop-blur-xl"
/* Dark mode */
className="dark:bg-black/40 dark:backdrop-blur-xl"Validation Checklist
[ ] backdrop-blur-* present
[ ] Semi-transparent background (bg-*/opacity)
[ ] Subtle border (border-white/20)
[ ] Works on gradient backgrounds
[ ] Dark mode variant definedBest Practices
DO
- Use multiple blur layers for depth
- Add colored shadows for vibrancy
- Define dark mode variants
- Use CSS variables for glass-bg
DON'T
- Use flat backgrounds
- Hard borders (use /20 opacity)
- Skip shadow effects
- Forget dark mode