ReddRadar
Agent skill
glassmorphism-advanced
Advanced glassmorphism techniques with blur, layering, colored shadows, and depth. Use when creating frosted glass effects, transparent overlays, or modern glass UI.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/glassmorphism-advanced
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?