majiayu000 Glassmorphism Advanced
Modern glass UI effects inspired by DesignCode UI.
Agent Workflow (MANDATORY)
Before implementation:
- 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.
Core Technique
/* 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 |
Opacity Layers (DesignCode Pattern)
/* Light mode */
<div className="bg-white/80 backdrop-blur-xl">
/* Dark mode */
<div className="bg-black/40 backdrop-blur-xl">
/* Adaptive (CSS variables) */
<div className="bg-[var(--glass-bg)] backdrop-blur-xl">
Layered Glass Stack
/* Multiple glass layers for depth */
<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>
Colored Glass
/* Primary tinted glass */
className="bg-primary/10 backdrop-blur-xl border border-primary/20"
/* Accent glow */
className="bg-accent/5 backdrop-blur-xl shadow-lg shadow-accent/20"
Border Techniques
/* Subtle inner glow */
className="border border-white/20"
/* Gradient border (pseudo-element) */
className="relative before:absolute before:inset-0 before:rounded-2xl
before:p-px before:bg-gradient-to-b before:from-white/30 before:to-transparent"
Critical Rules
| NEVER | ALWAYS |
|---|---|
| Flat backgrounds | Add backdrop-blur |
| Hard borders | Use /20 opacity borders |
| No shadow | Add shadow-*/10 |
| Static glass | Animate opacity on hover |
Validation
[ ] backdrop-blur-* present
[ ] Semi-transparent background (bg-*/opacity)
[ ] Subtle border (border-white/20)
[ ] Works on gradient backgrounds
[ ] Dark mode variant defined
References
../../references/theme-presets.md- Glassmorphism preset../../references/ui-visual-design.md- Depth and layering