glassmorphism

Name: glassmorphism
Author: ainergiz

github.com/ainergizDesign & UI6527 installsUpdated 42w ago

About glassmorphism

A design pattern for creating frosted-glass overlays and floating UI elements, intended for people designing or implementing interfaces. It outlines effect variations and includes guidance on text contrast and performance considerations.

Key features

01Offer several glass effect strengths
02Distinguish dark and light overlays
03Specify background, blur, and border values
04Note text contrast requirements
05Flag blur performance considerations

Use cases

01Add floating controls over images or video
02Design carousel indicators or floating buttons
03Create tooltips and popovers
04Overlay navigation on a hero section

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/ainergiz/design-inspirations --skill glassmorphism

After installing, type/glassmorphismin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported