playbooks

home / skills / fusengine / agents / glassmorphism-advanced

glassmorphism-advanced skill

/plugins/design-expert/skills/glassmorphism-advanced

This skill helps you implement advanced glassmorphism techniques with layered blur, translucent overlays, and dark mode support for modern UI.

npx playbooks add skill fusengine/agents --skill glassmorphism-advanced

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.7 KB
---
name: glassmorphism-advanced
description: Use when creating frosted glass effects, transparent overlays, or modern glass UI. Covers blur, layering, colored shadows.
versions:
  tailwindcss: "4.1"
user-invocable: true
allowed-tools: Read, Write, Edit, Glob, Grep
related-skills: designing-systems, generating-components
---

# 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

| 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

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

```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
```

---

## 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

Overview

This skill provides an advanced glassmorphism toolkit for building frosted glass effects, layered transparent overlays, and modern glass UI components in TypeScript projects. It codifies blur levels, opacity layering, colored shadows, borders, and dark-mode variants so designers and developers can produce consistent, accessible glass surfaces. Use it to speed implementation and validation of glass-style components across apps and design systems.

How this skill works

The skill inspects component classes and layout patterns to ensure required glassmorphism primitives are present: backdrop-blur, semi-transparent backgrounds, subtle borders, depth shadows, and dark-mode variants. It recommends class-level patterns, blur intensity, and stacking strategies and can be combined with an agent workflow to explore the codebase, research browser support, and run validation checks. The result is prescriptive examples and a validation checklist you can apply to components and pages.

When to use it

  • Creating frosted overlays, modals, cards, and hero surfaces
  • Implementing multi-layer glass stacks for depth and parallax
  • Adding tinted/colored glass effects with matching colored shadows
  • Ensuring consistent light and dark mode variants across components
  • Validating that UI components use backdrop-filter and opacity rules

Best practices

  • Always include a backdrop-blur-* utility; avoid flat backgrounds
  • Layer multiple semi-transparent backgrounds for depth (backgrounds with differing blur and opacity)
  • Use subtle borders (e.g., border-white/20) instead of hard opaque borders
  • Add low-opacity colored shadows (shadow-primary/10) for vibrancy and separation
  • Define both light and dark mode variants explicitly
  • Use CSS variables for tint and glass-bg values for easy theming

Example use cases

  • A multi-layered modal where background, middle, and content layers use increasing opacity and decreasing blur
  • A hero section with backdrop-blur-3xl on the background layer and a semi-opaque content card with backdrop-blur-md
  • A dashboard card set that uses shadow-primary/10 and border-white/20 for subtle elevation on gradient backgrounds
  • A component library token set where glass colors and blur levels are exposed as CSS variables
  • Validating an app to ensure every glass-style component includes a dark-mode variant and backdrop-blur utility

FAQ

Is backdrop-filter required?

Yes — always include a backdrop-blur-* utility to achieve the frosted glass effect; flat opaque backgrounds break the style.

How do I handle dark mode?

Define explicit dark-mode classes (e.g., dark:bg-black/40 dark:backdrop-blur-xl) and test on gradient and image backgrounds to ensure legibility.