Claude-skill-registry glassmorphism

Creates frosted glass UI elements with blur, transparency, and subtle borders. Use when building overlays, floating controls, tooltips, or any element that should appear elevated with a translucent background.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/glassmorphism" ~/.claude/skills/majiayu000-claude-skill-registry-glassmorphism && rm -rf "$T"

manifest: skills/data/glassmorphism/SKILL.md

Glassmorphism Pattern

Create frosted glass effects for overlays and floating UI elements.

Core Classes

// Standard glassmorphic container
<div className="bg-black/20 backdrop-blur-md border border-white/10">
  ...
</div>

Variations

Dark Overlay (on images/media)

Best for controls overlaid on images or video.

<div className="bg-black/20 backdrop-blur-md border border-white/10 rounded-full px-3 py-2">
  {/* Content */}
</div>

Light Overlay (on dark backgrounds)

<div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3">
  {/* Content */}
</div>

Subtle Glass (minimal effect)

<div className="bg-black/10 backdrop-blur-sm border border-white/5 rounded-lg px-3 py-2">
  {/* Content */}
</div>

Strong Glass (prominent effect)

<div className="bg-black/40 backdrop-blur-lg border border-white/20 rounded-2xl px-5 py-4">
  {/* Content */}
</div>

Token Reference

Property	Light Glass	Standard	Strong
Background	`bg-black/10`	`bg-black/20`	`bg-black/40`
Blur	`backdrop-blur-sm`	`backdrop-blur-md`	`backdrop-blur-lg`
Border	`border-white/5`	`border-white/10`	`border-white/20`

Common Use Cases

Carousel Indicators

<div className="absolute bottom-3 left-1/2 -translate-x-1/2">
  <div className="flex items-center gap-2 px-3 py-2 rounded-full bg-black/20 backdrop-blur-md border border-white/10">
    {/* Indicator dots */}
  </div>
</div>

Floating Action Button

<button className="fixed bottom-6 right-6 p-4 rounded-full bg-black/20 backdrop-blur-md border border-white/10 hover:bg-black/30 transition-colors">
  <Icon className="w-6 h-6 text-white" />
</button>

Tooltip/Popover

<div className="absolute top-full mt-2 px-3 py-2 rounded-lg bg-black/30 backdrop-blur-md border border-white/10">
  <span className="text-white text-sm">Tooltip content</span>
</div>

Navigation Bar (over hero)

<nav className="fixed top-0 left-0 right-0 z-50 bg-black/10 backdrop-blur-md border-b border-white/10">
  {/* Nav content */}
</nav>

Text Contrast

When using glassmorphism, ensure text has sufficient contrast:

Background Opacity Text Color

bg-black/10

bg-black/20

text-white

text-white/90

bg-black/30

bg-black/40

text-white

bg-white/10

bg-white/20

text-white

text-zinc-100

Performance Note

backdrop-blur

can impact performance on lower-end devices. Consider:

Using smaller blur values (
```
backdrop-blur-sm
```
) for frequently updated elements
Avoiding large glassmorphic areas that cover significant viewport
Testing on mobile devices

Checklist

Background has transparency (e.g.,
```
bg-black/20
```
)
```
backdrop-blur-*
```
applied for frosted effect
Subtle border with transparency (
```
border-white/10
```
)
Text has sufficient contrast
Border radius matches design language
Tested on lower-end devices for performance