glassmorphism-advanced

Original：🇺🇸 English

Translated

Use when creating frosted glass effects, transparent overlays, or modern glass UI. Covers blur, layering, colored shadows.

2installs

Sourcefusengine/agents

Added on2026-02-28

NPX Install

npx skill4agent add fusengine/agents glassmorphism-advanced

SKILL.md Content

View Translation Comparison →

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

tsx

className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl"

With Colored Shadow

tsx

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

tsx

<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

tsx

/* 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