# Glassmorphism Effects

> Glass effects, blur techniques, frosted glass UI, and translucency in interface design.

- Skill: `dragoon0x/glassmorphism-effects` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/glassmorphism-effects`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/glassmorphism-effects/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/glassmorphism-effects

---


# Glassmorphism Effects

## Glassmorphism

### Properties
```css
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
}
```

### When It Works
- Overlays on colorful or photographic backgrounds.
- Navigation bars over content.
- Card overlays on media.
- Modal backgrounds.

### When It Doesn't
- On solid color backgrounds (nothing to blur = no effect).
- Dense text content (readability suffers).
- Low-end devices (backdrop-filter is expensive).

## Performance
- `backdrop-filter` is GPU-intensive.
- Provide fallback: solid semi-transparent background.
- Test on older devices.
- Limit the area affected (don't blur the entire viewport).

## Accessibility
- Ensure text contrast meets WCAG even with blur.
- Test with blur disabled (graceful degradation).
- High-contrast mode should override glass effects.