Glassmorphism

---
name: glassmorphism
description: Apply the Glassmorphism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Glassmorphism, mentions frosted glass UI, glass UI, acrylic, or describes backdrop blur, translucent white panels, vivid gradient backdrop — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Glassmorphism Design System

Translucent frosted-glass panels floating over a vivid gradient background: background blur, 1px light borders, and soft depth. Popularized by macOS Big Sur and Windows Fluent's acrylic material.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Glassmorphism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (frosted glass UI, glass UI, acrylic), or describes its traits: backdrop blur; translucent white panels; vivid gradient backdrop; 1px light borders; layered depth.

## Design tokens

### Color palette

- Deep indigo backdrop base (under the gradient): `#1e1b4b` (--color-bg)
- Second gradient stop, violet: `#7c3aed` (--color-bg-gradient-2)
- Third gradient stop, magenta: `#db2777` (--color-bg-gradient-3)
- Glass panel fill, 10% white: `#ffffff1a` (--color-surface)
- Primary text on glass: `#f8fafc` (--color-text)
- Secondary text: `#cbd5e1` (--color-text-muted)
- Interactive accent, periwinkle: `#818cf8` (--color-accent)
- Glass edge, 20% white: `#ffffff33` (--color-border)

### Typography

- Display / headings: Outfit (fallback: -apple-system, Segoe UI, sans-serif)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.15, letter-spacing -0.02em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Airy; glass panels need breathing room so the backdrop shows through between them.
- Border radius: md 16px, lg 24px, pill 999px — Generous rounding sells the glass; nothing sharp.
- Border treatment: 1px solid #ffffff33 — Light-catching edge. Optionally brighter on top edge via gradient border.

### Shadows

- float: `0 8px 32px rgba(0, 0, 0, 0.25)` — Default panel elevation
- float-lg: `0 16px 48px rgba(0, 0, 0, 0.35)` — Modals and hovered cards

### Layout

- Max content width: 1200px
- Fixed vivid gradient or mesh backdrop behind everything
- Panels layered at 2–3 depth levels
- Decorative blurred color blobs floating behind glass

### Effects

- backdrop-filter: blur(16px) saturate(160%)
- Gradient mesh or aurora background
- Subtle inner top-edge highlight (inset 0 1px 0 rgba(255,255,255,0.25))
- Frosted noise texture at 2–3% opacity to prevent banding

### Motion

- Easing: cubic-bezier(0.22, 1, 0.36, 1); durations 150ms / 250ms / 400ms
- Panels fade+rise on entry
- Hover slightly increases panel opacity and lifts shadow
- Background gradient may drift very slowly

## CSS variables (drop-in)

```css
:root {
  --color-bg: #1e1b4b;
  --color-bg-gradient-2: #7c3aed;
  --color-bg-gradient-3: #db2777;
  --color-surface: #ffffff1a;
  --color-text: #f8fafc;
  --color-text-muted: #cbd5e1;
  --color-accent: #818cf8;
  --color-border: #ffffff33;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.25);
  --shadow-float-lg: 0 16px 48px rgba(0, 0, 0, 0.35);
  --border-default: 1px solid #ffffff33;
  --font-display: Outfit, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Sticky glass bar (blur 20px), 1px bottom light border, thin logo, ghost links that brighten on hover
- **Hero:** Large headline directly on the gradient, glass panel beneath holding the product shot or form
- **Card:** Glass surface, 16–24px radius, light border, float shadow, 24–32px padding
- **Button (primary):** Solid accent fill, white text, pill or 12px radius, soft glow on hover
- **Button (secondary):** Glass fill (white 10%), light border, white text; brightens to white 20% on hover
- **Form fields:** Glass fill, light border, white text with 60% white placeholder; focus ring in accent at 40% opacity

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Panels of rgba-white over a colorful backdrop with backdrop-filter: blur(16px) saturate(160%) and a 1px rgba(255,255,255,0.2) border catching the light on top edges. Spend boldness here; keep everything else quiet.

## Do

- Keep a vivid, colorful backdrop — glass over gray reads as fog, not glass
- Always pair blur with a translucent fill AND a light border; all three make the material
- Limit glass to 2–3 stacked layers maximum
- Add a faint noise texture to large glass areas to avoid gradient banding

## Don't

- Never put glass panels on a flat single-color background
- Don't stack text on low-opacity glass over busy imagery without a contrast scrim
- No hard black shadows or visible dark borders
- Don't use blur values below 8px (reads as a rendering bug) or above 40px (kills the backdrop)

## Accessibility notes

- Text over glass has variable contrast depending on the backdrop behind it — test worst-case backdrop regions, and add a darkening scrim inside panels holding body text
- backdrop-filter is GPU-costly; cap the number of blurred layers and test on low-end devices
- Provide a reduced-transparency fallback (solid #312e81 panels) for users with prefers-reduced-transparency

## Reference sites

- macOS Big Sur design language: https://www.apple.com/macos
- Microsoft Fluent acrylic: https://fluent2.microsoft.design
- css.glass generator: https://css.glass

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip glassmorphism.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/glassmorphism.json

Settings → Capabilities → Skills → Upload skill → glassmorphism.zip