The -morphism family · 2020–present
Aurora gradients
Large, blurred, slowly shifting blobs of colour behind content, like the northern lights.
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(10% 0.025 265) - --fg
oklch(96% 0.01 265) - --muted
oklch(70% 0.03 265) - --surface
oklch(16% 0.03 265 / 0.78) - --surface-2
oklch(22% 0.04 265 / 0.82) - --border
oklch(100% 0 0 / 0.1) - --accent
oklch(82% 0.18 165) - --accent-fg
oklch(12% 0.03 265) - --focus
oklch(82% 0.18 165)
| Token | Value |
|---|---|
| --font-body | 'Sora', system-ui, sans-serif |
| --font-display | 'Sora', system-ui, sans-serif |
| --radius | 16px |
| --radius-sm | 10px |
| --shadow | 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 10px 30px oklch(5% 0.025 265 / 0.5) |
| --shadow-lg | 0 30px 80px oklch(5% 0.025 265 / 0.75) |
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&display=swap');
:root {
--bg: oklch(10% 0.025 265);
--fg: oklch(96% 0.01 265);
--muted: oklch(70% 0.03 265);
--surface: oklch(16% 0.03 265 / 0.78);
--surface-2: oklch(22% 0.04 265 / 0.82);
--border: oklch(100% 0 0 / 0.1);
--accent: oklch(82% 0.18 165);
--accent-fg: oklch(12% 0.03 265);
--focus: oklch(82% 0.18 165);
--font-body: 'Sora', system-ui, sans-serif;
--font-display: 'Sora', system-ui, sans-serif;
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 10px 30px oklch(5% 0.025 265 / 0.5);
--shadow-lg: 0 30px 80px oklch(5% 0.025 265 / 0.75);
}Where it came from
Origin: Stripe’s animated WebGL gradient, Dribbble mesh-gradient trend
Stripe’s animated WebGL gradient homepage and the wider mesh-gradient trend on Dribbble and in design tools made it popular. Later it became the default background for AI and crypto landing pages, which made it a cliché quickly.
How to spot it
- Multiple radial gradients blurred together
- Slow drifting animation
- Dark or very light base
- Usually paired with glass panels
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Instant atmosphere | Heavily overused (the “AI startup” look) |
| Cheap to build with CSS | Says nothing about the product |
| Works with almost any brand colour | Animation can distract |
In the wild
- Stripe homepage gradient
- Countless AI-tool landing pages
- Abstract colour-field desktop wallpapers
Use it when
A brand moment or hero where mood is the point — not behind dense UI.