# Glassmorphism

> An interface style of translucent, frosted panels floating over vivid, blurred backgrounds, so that depth and hierarchy come from layered transparency. Rooted in Windows Aero glass, the blur layers of iOS 7 and Fluent Design's Acrylic, it was named in 2020 around the launch of macOS Big Sur and returned in 2025 as Apple's refractive Liquid Glass.

- Period: 2020–present
- Where: Global / networked
- Origin: Apple (macOS Big Sur) and Microsoft (Fluent Design Acrylic); named in the UI design community
- Branch: Digital native
- Also known as: Frosted glass UI, Glass UI, Acrylic
- Page: https://stylogeny.com/styles/glassmorphism/

## How it works

- Layer translucent panes over a vivid backdrop and blur what lies behind them, so it reads as colour rather than detail.
- Give each pane a faint white fill, a 1px semi-transparent light border and a soft shadow so its edge holds against the background.
- Place saturated gradient orbs, wallpaper or 3D shapes behind the glass: the effect only works when there is colour to diffuse.
- Stack panes at distinct depths so hierarchy follows the z-axis, with the most important layer frontmost and most opaque.
- Keep text on glass high-contrast and limit the number of translucent layers on screen at once.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Cards & bento tiles](https://stylogeny.com/design-choices/cards-and-bento-tiles/) (characteristic)
- [Full bleed](https://stylogeny.com/design-choices/full-bleed/) (characteristic)
- [Collage & layering](https://stylogeny.com/design-choices/collage-and-layering/) (occasional)
- [Central symmetry](https://stylogeny.com/design-choices/central-symmetry/) (occasional)

### Space & hierarchy
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (defining)
- [Measured density](https://stylogeny.com/design-choices/measured-density/) (characteristic)
- [Generous white space](https://stylogeny.com/design-choices/generous-white-space/) (occasional)

### Typography
- [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (characteristic)
- [Geometric sans](https://stylogeny.com/design-choices/geometric-sans/) (occasional)

### Colour
- [Gradients](https://stylogeny.com/design-choices/gradients/) (defining)
- [Analogous harmony](https://stylogeny.com/design-choices/analogous-harmony/) (characteristic)
- [Pastel](https://stylogeny.com/design-choices/pastel/) (occasional)
- [Full polychrome](https://stylogeny.com/design-choices/full-polychrome/) (occasional)
- [Dark ground](https://stylogeny.com/design-choices/dark-ground/) (occasional)
- [Iridescent & holographic](https://stylogeny.com/design-choices/iridescent-and-holographic/) (occasional)

### Form & shape
- [Rounded & pill](https://stylogeny.com/design-choices/rounded-and-pill/) (defining)
- [Biomorphic curves](https://stylogeny.com/design-choices/biomorphic-curves/) (characteristic)
- [Geometric primitives](https://stylogeny.com/design-choices/geometric-primitives/) (occasional)

### Surface & texture
- [Frosted glass](https://stylogeny.com/design-choices/frosted-glass/) (defining)
- [Gloss & highlights](https://stylogeny.com/design-choices/gloss-and-highlights/) (occasional)
- [Grain & noise](https://stylogeny.com/design-choices/grain-and-noise/) (occasional)

### Ornament
- [Ornament-free](https://stylogeny.com/design-choices/ornament-free/) (characteristic)

### Imagery
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (characteristic)
- [3D render](https://stylogeny.com/design-choices/3d-render/) (occasional)
- [Straight photography](https://stylogeny.com/design-choices/straight-photography/) (occasional)

### Medium & production
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (defining)
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (characteristic)

### Tone & intent
- [Technological & futurist](https://stylogeny.com/design-choices/technological-and-futurist/) (characteristic)
- [Calm & contemplative](https://stylogeny.com/design-choices/calm-and-contemplative/) (occasional)
- [Luxurious & glamorous](https://stylogeny.com/design-choices/luxurious-and-glamorous/) (occasional)

Avoids: Hard offset shadow, Skeuomorphic material, Photocopy & distress, Paper & letterpress bite, Earth & mineral, Horror vacui, Abundant decoration

Palette: #7f5af0, #ff6ac1, #2cb1fc, #ffffff, #e6ecf5, #1b1a33

Typefaces: SF Pro, Segoe UI Variable, Inter, Poppins

Known for: Apple iOS 7 Control Center and blurred overlays (2013); Microsoft Fluent Design System, Acrylic material (2017); Apple macOS Big Sur (2020); Michal Malewicz (HYPE4), 'Glassmorphism in user interfaces' (2020); Apple Liquid Glass (iOS 26 and macOS Tahoe, 2025)

## Where it comes from, and what it’s close to

- Grew out of: [Frutiger Aero](https://stylogeny.com/styles/frutiger-aero.md) (2004–2013)
- Influenced by: [Flat Design](https://stylogeny.com/styles/flat-design.md) (2010–2016)
- Alike in its design choices: [Neumorphism](https://stylogeny.com/styles/neumorphism.md) (2019–2021), 55% alike
- Alike in its design choices: [Dark Tech Minimalism](https://stylogeny.com/styles/dark-tech-minimalism.md) (2019–present), 53% alike
- Alike in its design choices: [DTC 'Blanding' / Millennial Minimalism](https://stylogeny.com/styles/dtc-blanding.md) (2012–2022), 50% alike
- Alike in its design choices: [Claymorphism & Soft 3D](https://stylogeny.com/styles/claymorphism.md) (2020–present), 48% alike
- Alike in its design choices: [Material Design](https://stylogeny.com/styles/material-design.md) (2014–present), 47% alike
- Alike in its design choices: [Roman-like Thai Typography (modern loopless Thai)](https://stylogeny.com/styles/thai-loopless-type.md) (1973–present), 46% alike

## Real works

- [macOS Big Sur Control Center (press image for "Apple introduces macOS Big Sur with a beautiful new design")](https://www.apple.com/newsroom/2020/06/apple-introduces-macos-big-sur-with-a-beautiful-new-design/): Apple, 22 June 2020, Apple Newsroom
- ["Glassmorphism in user interfaces" (UX Collective article), header illustration](https://web.archive.org/web/20201220040934/https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9): Michal Malewicz, 22 November 2020 (archived 20 December 2020), Internet Archive Wayback Machine
- ["Acrylic material" (Fluent Design System documentation), base acrylic illustration](https://web.archive.org/web/20171208055811/https://docs.microsoft.com/en-us/windows/uwp/design/style/acrylic): Microsoft, 2017 (page dated 9 August 2017; archived 8 December 2017), Internet Archive Wayback Machine
- [Deepin 23 Launchpad (main menu) over the default wallpaper](https://commons.wikimedia.org/wiki/File:Deepin_Linux_23_Launchpad_-_English.png): Deepin Technology Co., Ltd, 2024 (Deepin 23 release); screenshot taken 15 August 2025, Wikimedia Commons
- [Liquid Glass across Apple platforms (hero press image for "Apple introduces a delightful and elegant new software design")](https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/): Apple, 9 June 2025, Apple Newsroom

## Sources

- Michal Malewicz, 'Glassmorphism in user interfaces', UX Collective (2020)
- Microsoft, Fluent Design System: Acrylic material (learn.microsoft.com)

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Glassmorphism”, https://stylogeny.com/styles/glassmorphism/