Light & surface · 2014–present
Frosted Acrylic
Thick, near-opaque frosted panels with heavy blur and a cool light tint — more substantial than glass, closer to a physical acrylic sheet.
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(84% 0.028 250) - --fg
oklch(22% 0.02 255) - --muted
oklch(52% 0.018 255) - --surface
oklch(97% 0.006 250 / 0.88) - --surface-2
oklch(91% 0.012 252 / 0.75) - --border
oklch(78% 0.015 250 / 0.5) - --accent
oklch(56% 0.22 255) - --accent-fg
oklch(99% 0 0) - --focus
oklch(56% 0.22 255)
| Token | Value |
|---|---|
| --font-body | 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif |
| --font-display | 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif |
| --font-mono | 'Cascadia Code', 'Consolas', ui-monospace, monospace |
| --radius | 8px |
| --radius-sm | 5px |
| --shadow | 0 2px 8px oklch(20% 0.02 255 / 0.14), 0 1px 0 oklch(100% 0 0 / 0.5) inset |
| --shadow-lg | 0 16px 40px oklch(20% 0.02 255 / 0.22) |
:root {
--bg: oklch(84% 0.028 250);
--fg: oklch(22% 0.02 255);
--muted: oklch(52% 0.018 255);
--surface: oklch(97% 0.006 250 / 0.88);
--surface-2: oklch(91% 0.012 252 / 0.75);
--border: oklch(78% 0.015 250 / 0.5);
--accent: oklch(56% 0.22 255);
--accent-fg: oklch(99% 0 0);
--focus: oklch(56% 0.22 255);
--font-body: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
--font-display: 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'Cascadia Code', 'Consolas', ui-monospace, monospace;
--radius: 8px;
--radius-sm: 5px;
--shadow: 0 2px 8px oklch(20% 0.02 255 / 0.14), 0 1px 0 oklch(100% 0 0 / 0.5) inset;
--shadow-lg: 0 16px 40px oklch(20% 0.02 255 / 0.22);
}Where it came from
Origin: OS X Yosemite sidebar translucency (2014); physical frosted acrylic panels
OS X Yosemite introduced sidebar translucency that read as frosted acrylic rather than clear glass — heavily blurred, near-opaque, cool-tinted. The look has persisted through macOS Sequoia and iOS. It differs from glassmorphism in that the surface feels solid and structural rather than floating and decorative. The blur is so heavy that colour from behind becomes barely a hint, making text contrast reliable.
How to spot it
- Very strong backdrop-filter blur — 24px or more — making the background nearly invisible
- High base opacity — the panel is almost white, not clear
- Smooth, cool or neutral light tint with no vivid colour
- Crisp, clean edges without a glow border or inner highlight
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Stable text legibility — blur is heavy enough to suppress background interference | Needs a colourful or gradient background to make the effect visible at all |
| Cleaner and more neutral than full glassmorphism | Blur is GPU-intensive on low-end devices |
| Works in both light and dark modes | Can look plain or invisible if the background is too neutral |
In the wild
- OS X Yosemite to macOS Sequoia sidebar panels
- iOS Control Centre cards
- Architecture-inspired app designs using frosted acrylic panels
Use it when
App chrome — sidebars, toolbars, drawers — where you want content to remain partially visible without competing with the foreground.