SkillsAdd

ainergiz/design-inspirations

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.

First seen Feb 21, 2026

Installation

$ npx skills add ainergiz/design-inspirations --skill glassmorphism
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from ainergiz/design-inspirations.

npx skills add ainergiz/design-inspirations
expandable-card 11 nested-card 11 stacked-cards 11 image-carousel 11 create-new-design 10 dropdown-menu 10 component-variants 9

Browse all from ainergiz/design-inspirations

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Also listed on

Alternate registries and mirrors of this skill.

Repository health

Stars 6
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,364 B
  • docs SUMMARY.md 3,296 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 483 installs

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 or text-white/90
bg-black/30 - bg-black/40 text-white
bg-white/10 - bg-white/20 text-white or 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