Glassmorphism

This gives you a solid foundation for frosted glass UI effects using Tailwind's backdrop blur and transparency utilities. You get variations from subtle to strong, with clear token references for background opacity, blur intensity, and border transparency. The examples cover the usual suspects: floating action buttons, carousel indicators, tooltips, and navigation overlays. The text contrast guidance is helpful since readability on glass can get tricky fast. The performance warning about backdrop blur on mobile is honest and worth keeping in mind. It's straightforward pattern documentation that saves you from reinventing these values every time you need something to float elegantly over an image or video.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 91
skills.sh installs: 541
GitHub stars: 6
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add ainergiz/design-inspirations --skill glassmorphism --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Details

Repository: github.com/ainergiz/design-inspirations
Category: Design & UI/UX
First seen: Jun 3, 2026