# Glassmorphism

> Frosted glass, translucent panels, background blur, vibrant backdrops.

- Skill: `jdsadminllc/glassmorphism` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/glassmorphism`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/glassmorphism/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/glassmorphism

---

# Glassmorphism
## Mission
Create interfaces that feel like layered frosted glass — translucent panels floating over vibrant, colorful backgrounds with depth and dimensionality.
## Brand
### 🎨 Colors
- `#ffffff` — Panel background (at 15–30% opacity)
- `#0a0a1a` — Dark base background
- `#6366f1` — Primary accent (indigo)
- `#ec4899` — Secondary accent (pink)
- `#f8fafc` — Text on dark
- `#1e1b4b` — Text on light
### 🔤 Typography
- **Heading:** Inter (sans-serif, geometric)
- **Body:** Inter (sans-serif)
- **Scale:** xs: 0.75rem, sm: 0.875rem, base: 1rem, lg: 1.125rem, xl: 1.25rem, 2xl: 1.5rem, 3xl: 2rem
### 📐 Spacing
- 8px grid system
- Section padding: 4rem vertical, 2rem horizontal
- Card gaps: 1.5rem
- Border radius: 12–16px on all panels
### 🧩 Components
- **Buttons:** Translucent background with blur, border: 1px solid rgba(255,255,255,0.2), hover brightens to 40% opacity
- **Cards:** backdrop-filter: blur(16px), background: rgba(255,255,255,0.15), border: 1px solid rgba(255,255,255,0.3), border-radius: 16px
- **Nav:** Fixed top bar with backdrop-blur, semi-transparent, border-bottom for separation
- **Hero:** Full-height with vibrant gradient background, centered frosted-glass CTA card
- **Footer:** Subtle frosted bar, lighter blur, minimal content
### ♿ Accessibility
- Minimum 4.5:1 contrast for all text on frosted panels (test against the actual backdrop behind them)
- Focus rings: 2px solid white outline with 4px offset
- Respect prefers-reduced-motion: disable backdrop-filter animations
- Minimum font size: 0.75rem (12px) — never smaller
- All frosted overlays must pass WCAG AA on top of the most contrast-heavy possible background behind them
### ✍️ Writing Tone
Clean, modern, concise. Short labels. No marketing fluff. Use sentence case for UI labels. Product-first language.
## Do / Don't
### ✅ Do
- Use vibrant, colorful backgrounds behind glass panels so the effect is visible
- Layer multiple translucent elements with decreasing opacity to create depth
- Add subtle borders (1px, low opacity) to define panel edges
- Test contrast against multiple background colors, not just the default
- Use backdrop-filter with fallback solid colors for unsupported browsers
### ❌ Don't
- Place frosted glass panels over flat white/gray backgrounds — the effect disappears
- Stack more than 3 frosted layers — it becomes muddy and illegible
- Use text shadows for readability instead of proper contrast ratios
- Forget to provide a solid fallback background-color
- Apply blur to critical text elements — only to container backgrounds
## Quality Gates
- [ ] All frosted panels render correctly in Safari (requires -webkit-backdrop-filter)
- [ ] Text on glass passes 4.5:1 contrast ratio against the actual gradient/image behind it
- [ ] Solid background-color fallback works when backdrop-filter is disabled
- [ ] Panels remain legible at all viewport sizes (mobile glass panels need higher opacity)
- [ ] No more than 3 nested frosted layers
- [ ] Animations are disabled or reduced when prefers-reduced-motion is active