Glassmorphism effects

Skill Dragoon0x/everything-design-taste/skills/glassmorphism-effects

Glass effects, blur techniques, frosted glass UI, and translucency in interface design.From its SKILL.md

Install

npx -y skills add Dragoon0x/everything-design-taste --skill glassmorphism-effects

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.1 KB, 226 tokens by cl100k_base, as published. Nobody here has run it

Glassmorphism Effects

Glassmorphism

Properties

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

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.