Glassmorphism Advanced

Glassmorphism Advanced

Modern glass UI effects inspired by DesignCode UI.

Agent Workflow (MANDATORY)

Before implementation:

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.

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

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

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