Glassmorphism
Drop frosted-glass overlays and floating controls into a React/Tailwind UI without guessing blur, opacity, and border tokens.
Overview
glassmorphism is an agent skill for the Build phase that implements frosted-glass UI with Tailwind backdrop-blur, transparency, and border tokens for overlays and floating controls.
Install
npx skills add https://github.com/ainergiz/design-inspirations --skill glassmorphismWhat is this skill?
- Standard Tailwind recipe: bg-black/20, backdrop-blur-md, border-white/10
- Four strength presets: subtle, dark overlay, light overlay, and strong glass
- Token table mapping background opacity, blur scale, and border weight
- Guidance for dark-on-media vs light-on-dark background contexts
- Targets overlays, floating controls, and tooltips that need elevation without solid fills
- 4 glass variation presets
- 3-column token reference table (light, standard, strong)
Adoption & trust: 1 installs on skills.sh; 5 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
Who is it for?
Indie SaaS frontends, media-heavy UIs, and agent-assisted Tailwind refactors needing quick glass overlay patterns.
Skip if: Native mobile glass without CSS backdrop-filter support, brand systems that forbid translucent layers, or backend-only work.
When should I use this skill?
Building overlays, floating controls, tooltips, or any element that should appear elevated with a translucent background.
What do I get? / Deliverables
You paste vetted TSX class combinations for subtle through strong glass variants aligned to your background context.
- Copy-paste className recipes for glass containers
- Context-specific variant selection (dark vs light overlay)
Recommended Skills
Journey fit
Glassmorphism is a visual implementation pattern applied while building product UI surfaces, not during ideation or post-launch analytics. Frontend subphase is the canonical shelf because the skill ships copy-paste class recipes for in-app overlays, tooltips, and elevated panels.
How it compares
A UI pattern snippet skill—not a full component library or Figma-to-code generator.
Common Questions / FAQ
Who is glassmorphism for?
Solo frontend builders using React and Tailwind who need fast, consistent frosted-glass styling for overlays and controls.
When should I use glassmorphism?
During Build frontend work whenever you add tooltips, floating buttons, or panels that should appear elevated with a translucent background on images or dark UI.
Is glassmorphism safe to install?
It is documentation-only pattern guidance with no runtime hooks; still review the Security Audits panel on this Prism page before installing any skill from the catalog.
SKILL.md
READMESKILL.md - Glassmorphism
# Glassmorphism Pattern Create frosted glass effects for overlays and floating UI elements. ## Core Classes ```tsx // 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. ```tsx <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) ```tsx <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3"> {/* Content */} </div> ``` ### Subtle Glass (minimal effect) ```tsx <div className="bg-black/10 backdrop-blur-sm border border-white/5 rounded-lg px-3 py-2"> {/* Content */} </div> ``` ### Strong Glass (prominent effect) ```tsx <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 ```tsx <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 ```tsx <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 ```tsx <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) ```tsx <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