# Glassmorphism

Glass is used sparingly for **floating chrome** (header, menus, sheets, blog tables)—not as a general card style.

## When to use

| Allowed | Not allowed |
| --- | --- |
| Scrolled header shell | Every content card |
| Nav dropdown / mobile sheet | Full page backgrounds |
| Blog table header treatments | Text-heavy panels that hurt readability |

## Canonical recipe (header scrolled)

```txt
border-border/50
bg-background/75
supports-[backdrop-filter]:bg-background/65
backdrop-blur-xl
backdrop-saturate-150
shadow-sm
rounded-2xl
```

Mobile sheet:

```txt
bg-background/95
backdrop-blur-xl
backdrop-saturate-150
shadow-xl
border-border/50
```

Dropdown:

```txt
bg-popover/95
backdrop-blur-xl
shadow-md
border-border/50
rounded-xl
```

## Spec ranges

| Property | Range |
| --- | --- |
| Blur | `backdrop-blur-md` (12px) to `backdrop-blur-xl` (24px) |
| Fill opacity | 65%–95% of `background` / `popover` |
| Border | `border-border/40`–`/50` or translucent mixes |
| Saturation | `backdrop-saturate-150` for chrome |

## Readability rules

1. Text on glass must still meet contrast—prefer `foreground` / `muted-foreground`, not low-alpha white text on light glass.
2. Provide opaque fallbacks when `backdrop-filter` is unsupported (`supports-[backdrop-filter]:…` pattern).
3. Do not place long paragraphs on heavy blur without a solid scrim.

## Dark mode

Glass uses the same semantic tokens; dark backgrounds already sit on `#141818` / `#1c2424`. Do not switch to pure `bg-white/10` hacks unless matching an existing pattern (timeline idle cards are a special dark UI).

## Motion

Blur/background changes on the header animate with `duration-300 ease-out`. Avoid animating blur on scroll for large content regions (expensive).

## Forbidden

- Frosted cards stacked across an entire landing page.
- Extra noise textures + glass + glow simultaneously.
- Glass without border or shadow that disappears on light backgrounds.

## Related

- [navbar.md](./navbar.md)
- [gradients.md](./gradients.md)
- [cards.md](./cards.md)