Material & depth · 2021–2023
Inflated 3D
UI elements and illustrations pumped full of air: rounded, bulging, smooth-sheen shapes that look like they might float off the screen.
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 16 tokens
- --bg
oklch(96% 0.025 45) - --fg
oklch(24% 0.05 35) - --muted
oklch(54% 0.055 35) - --surface
oklch(100% 0 0) - --surface-2
oklch(94% 0.022 42) - --border
oklch(86% 0.04 42) - --accent
oklch(68% 0.22 35) - --accent-fg
oklch(99% 0 0) - --focus
oklch(68% 0.22 35)
| Token | Value |
|---|---|
| --font-body | 'Nunito', ui-rounded, system-ui, sans-serif |
| --font-display | 'Nunito', ui-rounded, system-ui, sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 26px |
| --radius-sm | 16px |
| --shadow | 0 8px 20px oklch(40% 0.08 35 / 0.22), 0 2px 6px oklch(40% 0.08 35 / 0.14) |
| --shadow-lg | 0 18px 50px oklch(38% 0.1 35 / 0.3) |
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&display=swap');
:root {
--bg: oklch(96% 0.025 45);
--fg: oklch(24% 0.05 35);
--muted: oklch(54% 0.055 35);
--surface: oklch(100% 0 0);
--surface-2: oklch(94% 0.022 42);
--border: oklch(86% 0.04 42);
--accent: oklch(68% 0.22 35);
--accent-fg: oklch(99% 0 0);
--focus: oklch(68% 0.22 35);
--font-body: 'Nunito', ui-rounded, system-ui, sans-serif;
--font-display: 'Nunito', ui-rounded, system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 26px;
--radius-sm: 16px;
--shadow: 0 8px 20px oklch(40% 0.08 35 / 0.22), 0 2px 6px oklch(40% 0.08 35 / 0.14);
--shadow-lg: 0 18px 50px oklch(38% 0.1 35 / 0.3);
}Where it came from
Origin: Spline and Blender 3D illustration trend; social media design
The inflated 3D aesthetic emerged around 2021 alongside the rise of accessible 3D tools like Spline and simpler Blender workflows. Soft, puffy shapes appeared on landing pages, app icons, and marketing materials. It shares DNA with claymorphism but focuses on pure volumetric inflation — a smooth high-gloss sheen over balloon-like forms — rather than the matte clay texture. As a trend it moved fast and is already being positioned as a 2021 artifact.
How to spot it
- Highly rounded forms that appear inflated from within
- Smooth plastic-sheen highlight on the upper surface
- Pastel or bright saturated palette — no greys
- Strong sense of volume with no hard or angular edges
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Friendly and approachable — low intimidation factor | Trend-specific — dates quickly |
| Distinctive against flat-design context | Difficult to implement in pure CSS (usually requires 3D-rendered assets) |
| Works well for marketing illustrations and app icon sets | Does not scale to dense information UIs |
In the wild
- Spline.design showcase sites
- Web3 and crypto project landing pages (2021–2022)
- App store icon sets of the same period
Use it when
Landing pages or marketing surfaces where a youthful, energetic first impression matters and 3D assets are available.