# Glassmorphism

Also called: frosted glass UI, glass cards, backdrop blur UI, translucent UI  
Era: 2020-2023 (Windows Vista Aero and iOS 7 as ancestors; named by Michal Malewicz in 2020)  
Page: https://designforai.dev/style/glassmorphism

## Traits

- translucent panels (white at 8-20% alpha) over a colourful, blurred background
- `backdrop-filter: blur(16-24px)` is the whole trick; nothing works on a flat background
- 1px light border (white at 25-40%) to fake a glass edge
- soft, wide shadows in a tinted colour, never pure black
- radius 16-24px, generous inner padding
- background carries blurred colour blobs so the blur has something to smear
- type stays crisp and high contrast on top of the glass

Palette: #0f172a page base, #7c3aed and #06b6d4 background blobs, rgba(255,255,255,0.12) glass fill, rgba(255,255,255,0.35) glass edge, #f8fafc text

Type: Manrope or DM Sans for everything; headings 600, body 400 at 16px; avoid thin weights on glass (they vanish against blur)

## Do

- put two or three large blurred colour shapes behind the layout so the blur has depth to reveal
- keep glass panels to two levels max: card and a hovering overlay
- test every text colour against the busiest part of the background

## Don't

- do not stack glass on glass on glass; it turns to mud
- do not use glass on a plain white or plain black page; there is nothing to blur
- do not forget a solid fallback for browsers without backdrop-filter

Known for it: Apple macOS Big Sur, Microsoft Fluent Acrylic, Stripe dashboards (partial)

## CSS seed

```css
:root{--bg:#0f172a; --fg:#f8fafc; --accent:#7c3aed; --glass:rgba(255,255,255,0.12); --edge:rgba(255,255,255,0.35); --radius:20px; --shadow:0 8px 32px rgba(31,38,135,0.37); --font:'Manrope',sans-serif}
```

## Prompt

Build the site in a glassmorphism style. Page background #0f172a with three large blurred radial blobs in #7c3aed, #06b6d4 and #ec4899 (filter: blur(80px), opacity 0.6) placed behind the content. Every card, nav bar and modal is a glass panel: background rgba(255,255,255,0.12), backdrop-filter blur(20px) saturate(160%), 1px border rgba(255,255,255,0.35), border-radius 20px, box-shadow 0 8px 32px rgba(31,38,135,0.37). Text #f8fafc, secondary text rgba(248,250,252,0.7). Font Manrope: headings 600 at 40/28/20px, body 400 at 16px, line-height 1.6. Buttons: solid #7c3aed with white text, radius 12px, hover lifts 2px with a brighter shadow. Spacing on an 8px scale, card padding 24-32px. Provide a solid fallback (rgba(15,23,42,0.85)) when backdrop-filter is unsupported. Motion: 200ms ease-out on hover only; no scroll-triggered animation.