# 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.

- Category: Light & surface
- Era: 2014–present
- Origin: OS X Yosemite sidebar translucency (2014); physical frosted acrylic panels
- Lesson: https://design.dawit.dev/styles/frosted-acrylic
- Try it: https://design.dawit.dev/styles/frosted-acrylic?style=frosted-acrylic

## Where it came from

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

## Strengths

- Stable text legibility — blur is heavy enough to suppress background interference
- Cleaner and more neutral than full glassmorphism
- Works in both light and dark modes

## Weaknesses

- Needs a colourful or gradient background to make the effect visible at all
- Blur is GPU-intensive on low-end devices
- 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.

## Related styles
[Glassmorphism](https://design.dawit.dev/styles/glassmorphism.md), [Translucent Layers](https://design.dawit.dev/styles/translucent-layers.md), [Liquid Glass](https://design.dawit.dev/styles/liquid-glass.md)