Definition

Glassmorphism is a design trend characterized by the use of frosted glass-like transparency effects combined with blurred backgrounds, vibrant colors, and subtle shadows. It creates a sense of depth and lightness, often used for card designs or modals. Glassmorphism evokes a sense of elegance and modernity, but care must be taken to maintain legibility and usability, especially for text placed over blurred areas.

Why it matters

Glassmorphism can add depth and visual sophistication to interfaces, but it comes with real risks — blurred backgrounds reduce legibility of text placed over them, and the effect can be inaccessible for users with contrast sensitivity issues. It works best as a subtle accent (a floating card over a gradient background) rather than a structural interface pattern. Used tastefully, it signals modernity; overused, it becomes noise.

Real-world example

Apple's macOS Big Sur introduced glassmorphism in the sidebar, dock, and notification center — translucent panels that show a blurred version of content behind them. It creates depth and context without obscuring content, though Apple carefully limits it to non-critical interface chrome rather than content areas.

Confused about
Glassmorphism
?
Design is fun, but it's not easy.
Get help from a senior designer.
Start your project with us!
Start a project