Glassmorphism Advanced

Agent Workflow (MANDATORY)

Before implementation, use TeamCreate to spawn 3 agents:

1. fuse-ai-pilot:explore-codebase - Check existing glass patterns
2. fuse-ai-pilot:research-expert - Latest backdrop-filter support

After: Run fuse-ai-pilot:sniper for validation.

Overview

Critical Rules

1. backdrop-blur required - No flat backgrounds
2. Semi-transparent bg - Use bg-white/10, bg-black/40
3. Subtle borders - border-white/20
4. Shadow for depth - shadow-xl shadow-primary/10
5. 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

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 defined

Best 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