dragoon0x/everything-design-taste
glass-morphism
Glassmorphism patterns, backdrop blur, frosted glass effects, and when to use (and avoid) glass effects.
First seen Jul 18, 2026
Installation
$
npx skills add dragoon0x/everything-design-taste --skill glass-morphism
SKILL.md
Glassmorphism
When It Works
- Floating toolbars/navigation over visual content
- Cards overlaying image backgrounds
- Status bars and overlays in media apps
- Modal overlays that maintain background context
When It Fails
- On solid color backgrounds (pointless, no background to show through)
- When readability is compromised
- Overuse: if everything is glass, nothing has visual weight
- On low-power devices (backdrop-filter is expensive)
Implementation
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
}
Rules
- Always add a semi-transparent border (defines the edge)
- Background opacity: 5-20% (more = less glass effect)
- Blur radius: 12-24px (less = too noisy, more = solid looking)
- Ensure text contrast meets WCAG on worst-case backgrounds
- Fallback for browsers without backdrop-filter support
- Test on various backgrounds (the effect changes dramatically)
