Glassmorphism Frosted 2021

Glassmorphism Frosted 2021

Glassmorphism is a UI design style characterized by frosted-glass translucency: panels that appear to be made of thick, slightly milky glass, blurring whatever lies behind them while maintaining structural form. The aesthetic had its defining mainstream moment with the release of macOS Big Sur in November 2020, which extended Apple's existing menu bar translucency throughout the OS interface. The term 'glassmorphism' was popularized by designer Michal Malewicz in a 2020 blog post that gave the emerging trend a name and a set of defining properties.

macOS Big Sur and the Apple Origin

Apple's iOS has used blur effects since Jony Ive's iOS 7 redesign in 2013 - the translucent Control Center and notification bar were among the most-noticed visual changes in that update. But macOS Big Sur applied the treatment more systematically and visually prominently. Sidebars, notification panels, and the Dock all used frosted translucency, creating a visual hierarchy where content behind the UI remained visible as a blur, suggesting depth without the explicit drop shadows of earlier interfaces.

This Apple implementation gave glassmorphism a premium association - it was used by the world's most valuable technology company as the default desktop interface for millions of users. Designers attempting to signal premium quality began incorporating the effect.

The CSS Implementation and Web Adoption

Glassmorphism's spread was enabled by CSS's backdrop-filter: blur() property becoming widely supported in Chromium browsers from 2019. What had been a computationally expensive effect for native apps became achievable in web pages with a few lines of CSS. Design tutorials demonstrating the effect went viral on YouTube, Dribbble, and CSS-tricks. By 2021, glassmorphism UI kits, Figma templates, and tutorial series made the style accessible to designers at every level.

The canonical implementation: a semi-transparent white or slightly tinted background with background: rgba(255, 255, 255, 0.15-0.25), a backdrop blur of blur(10px-20px), a light inner border (border: 1px solid rgba(255, 255, 255, 0.2)), and optionally a subtle inner shadow to emphasize the glass edge.

Saturation and Transition

By late 2022, glassmorphism had appeared on so many UI projects that it had transitioned from trend to visual cliché. The aesthetic persisted most usefully in dark-mode SaaS products, where frosted glass panels floating over gradient backgrounds remained effective. The 2023-2024 version often appears with gradient mesh backgrounds visible through the glass panels - the combination of ambient gradient light and frosted surface continued to communicate premium digital design.