# Glassmorphism

> Translucent, frosted panels floating over colourful backgrounds, with background blur and a thin bright border.

- Category: The -morphism family
- Era: 2020–present
- Origin: Windows Vista Aero, iOS 7 blur, macOS Big Sur
- Lesson: https://design.dawit.dev/styles/glassmorphism
- Try it: https://design.dawit.dev/styles/glassmorphism?style=glassmorphism

## Where it came from

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

## Strengths

- Shows hierarchy through depth
- Keeps context visible behind overlays
- Modern, light feel

## Weaknesses

- Text contrast varies with whatever is behind it
- Blur is expensive on low-end devices
- 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.

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