Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Glassmorphism

glassmorphism

Add to comparison +
Visual stylesScope: Whole experienceglassmorphism · v0.1.0

A visual style that uses varying levels of translucency and background blur so foreground elements appear to float over the background like frosted glass, establishing depth between layers.

Illustration · Editorial artwork, no interactive specimen yet
A set of frosted translucent glass cards floating over a softly blurred colorful background, with thin light borders along their edges, illustrating the layered depth of glassmorphism.
A set of frosted translucent glass cards floating over a softly blurred colorful background, with thin light borders along their edges, illustrating the layered depth of glassmorphism.

Recognizing it

  • Translucent foreground panels reveal a blurred background
  • A thin, light border or gradient outlines the panel edge
  • Stacked layers create perceptible front-to-back depth

Concept boundary

This names a family of visual styles, not one platform's implementation. Apple's Liquid Glass is one platform example of a system-level material and is not the whole Apple design system; translucent materials on other platforms are not split into separate styles here. Simply making a panel semi-transparent without treating the background does not constitute the style.

When to consider it

  • Overlays, cards, or controls need emphasis while the background context stays visible
  • The brand wants to convey lightness, refinement, or consistency with a platform material
  • The background is relatively simple, so the colors and details showing through can be controlled

When to be cautious

  • The panel sits over changing, colorful content where text contrast is hard to guarantee
  • Target devices or runtimes cannot render background blur reliably
  • Every layer is made of glass, which blurs the front-to-back relationships instead of clarifying them

Tradeoff

It conveys depth and lightness, but legibility depends on the background and blur amount, and real-time blur carries performance and compatibility costs.

Conditional rules · Editorial advice

When Text or icons are placed on a translucent backgroundMustVerify contrast against the least favorable colors the background can show; raise panel opacity, increase blur, or add a scrim when needed, rather than checking once against a sample background.
When Applying it across platforms or on performance-constrained devicesRecommendedPrepare an opaque fallback for environments without background blur or with reduce-transparency enabled, and limit the number of glass layers on one screen.

Related entries

Neo-Brutalism ↗Conditional alternative · Choosing the primary visual language for the same product

One expresses depth through soft translucent layers, the other expresses directness through hard outlines and color blocks; they rarely mix well.

Bento Grid ↗Works with · Organizing content in a card grid where cards need to float above the background

The layout decides card position and size; the glass material only decides the card surface, so the two can be chosen independently.

Inclusive Design ↗Conditional conflict · Text on translucent layers is not checked against the least favorable background, or the design ignores a user's reduce-transparency setting

Low-vision users depend on stable contrast; a material effect should not come at the expense of legibility.

Sources and what they support

Nielsen Norman Group · Glassmorphism: Definition and Best Practices ↗

The article defines glassmorphism as a visual style that uses varying translucency to create depth between foreground and background while mimicking frosted glass, and warns about text contrast and accessibility over busy backgrounds. This entry's definition paraphrases it.

Retrieved: 2026-09-15
Apple Newsroom · Apple introduces a delightful and elegant new software design ↗

The June 9, 2025 announcement describes Liquid Glass as a translucent material that reflects and refracts surrounding content and adapts to its environment, spanning iOS 26 and other platforms. It is cited only as a platform material example, not as the whole system.

Retrieved: 2026-09-15
MDN · backdrop-filter ↗

The documentation explains that backdrop-filter applies effects such as blur to the area behind an element, and that the element or its background must be transparent or partially transparent for the effect to show. It documents a common web mechanism for the style, not a definition of it.

Retrieved: 2026-09-15

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

This entry has no interactive specimen yet; the illustration is an editorial sketch, and contrast and legibility must still be verified in a real product.

{
  "tokens": {
    "surface": "rgba(255, 250, 240, 0.55)",
    "ink": "#18231f",
    "accent": "#c9713d",
    "radiusPx": 16,
    "shadow": "0 8px 24px rgba(24, 35, 31, 0.12)"
  },
  "tokenScope": "A recipe for this specimen; a real panel also needs background blur and a light border, and contrast must be verified against the actual background."
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.