The -morphism family · 2020–present
Glassmorphism
Translucent, frosted panels floating over colourful backgrounds, with background blur and a thin bright border.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 15 tokens
- --bg
oklch(62% 0.2 235) - --fg
oklch(98% 0.01 285) - --muted
oklch(88% 0.04 285) - --surface
oklch(100% 0 0 / 0.14) - --surface-2
oklch(100% 0 0 / 0.22) - --border
oklch(100% 0 0 / 0.32) - --accent
oklch(98% 0.01 285) - --accent-fg
oklch(25% 0.1 250) - --focus
oklch(92% 0.1 200)
| Token | Value |
|---|---|
| --font-body | 'Plus Jakarta Sans', system-ui, sans-serif |
| --font-display | 'Plus Jakarta Sans', system-ui, sans-serif |
| --radius | 20px |
| --radius-sm | 12px |
| --shadow | 0 8px 32px oklch(20% 0.12 250 / 0.28) |
| --shadow-lg | 0 24px 60px oklch(18% 0.12 250 / 0.45) |
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');
:root {
--bg: oklch(62% 0.2 235);
--fg: oklch(98% 0.01 285);
--muted: oklch(88% 0.04 285);
--surface: oklch(100% 0 0 / 0.14);
--surface-2: oklch(100% 0 0 / 0.22);
--border: oklch(100% 0 0 / 0.32);
--accent: oklch(98% 0.01 285);
--accent-fg: oklch(25% 0.1 250);
--focus: oklch(92% 0.1 200);
--font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
--font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
--radius: 20px;
--radius-sm: 12px;
--shadow: 0 8px 32px oklch(20% 0.12 250 / 0.28);
--shadow-lg: 0 24px 60px oklch(18% 0.12 250 / 0.45);
}Where it came from
Origin: Windows Vista Aero, iOS 7 blur, macOS Big Sur
Frosted glass appeared in Windows Vista’s Aero (2007) and iOS 7’s control centre (2013). The name was coined in 2020 when macOS Big Sur and Dribbble shots made it a trend. CSS backdrop-filter made it easy on the web, so it spread fast.
How to spot it
- backdrop-filter: blur() on semi-transparent surfaces
- Thin 1px light border to define the edge
- Vivid gradient or photo behind the glass
- Layered depth — panels stacked over each other
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Shows hierarchy through depth | Text contrast varies with whatever is behind it |
| Keeps context visible behind overlays | Blur is expensive on low-end devices |
| Modern, light feel | Needs a busy background to look like anything |
In the wild
- macOS Control Center
- Windows 11 flyouts
- Credit-card UI concepts
Use it when
Overlays, sheets and menus that sit above rich content where keeping context matters.