VOCABULARY / ENTRY

Glassmorphism

glassmorphism

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.

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."
}

Full Agent entry JSON

{
  "id": "glassmorphism",
  "type": "visual",
  "name": {
    "zh": "玻璃拟态",
    "en": "Glassmorphism"
  },
  "aliases": [
    "Glass UI",
    "毛玻璃风格",
    "Frosted Glass",
    "磨砂玻璃"
  ],
  "granularity": "experience",
  "intents": [
    "express-brand",
    "organize-content"
  ],
  "tags": [
    "translucency",
    "background blur",
    "depth",
    "frosted glass",
    "contrast"
  ],
  "definition": "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.",
  "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.",
  "signature": [
    "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"
  ],
  "when": [
    "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_not": [
    "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.",
  "comparison": {
    "focus": "Perceiving hierarchy through material",
    "mechanism": "Translucency, background blur, and light borders",
    "cost": "Requires ongoing verification of contrast and rendering"
  },
  "sources": [
    {
      "id": "glass-nng",
      "title": "Nielsen Norman Group · Glassmorphism: Definition and Best Practices",
      "url": "https://www.nngroup.com/articles/glassmorphism/",
      "claim": "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.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/glassmorphism/",
        "status": "available",
        "checkedAt": "2026-09-15T18:04:28.921Z",
        "jobId": "spn2-1d93eb418c7469100a6e9ad4baf020ae2908ea3d",
        "url": "https://web.archive.org/web/20260915180514/https://www.nngroup.com/articles/glassmorphism/",
        "timestamp": "20260915180514"
      }
    },
    {
      "id": "glass-apple-liquid-glass",
      "title": "Apple Newsroom · Apple introduces a delightful and elegant new software design",
      "url": "https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/",
      "claim": "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.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/",
        "status": "available",
        "checkedAt": "2026-09-15T18:04:28.923Z",
        "jobId": "spn2-bfdf8aa2acc5bb0f68c0aa9ba74c3de587c0b3ad",
        "url": "https://web.archive.org/web/20260915180455/https://www.apple.com/newsroom/2025/06/apple-introduces-a-delightful-and-elegant-new-software-design/",
        "timestamp": "20260915180455"
      }
    },
    {
      "id": "glass-mdn-backdrop-filter",
      "title": "MDN · backdrop-filter",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter",
      "claim": "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.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter",
        "status": "available",
        "checkedAt": "2026-09-15T18:05:14.008Z",
        "jobId": "spn2-c8134e941f9adf6fff989823d8ad09e97500e144",
        "url": "https://web.archive.org/web/20260915180558/https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter",
        "timestamp": "20260915180558"
      }
    }
  ],
  "relations": [
    {
      "target": "neo-brutalism",
      "kind": "alternative",
      "condition": "Choosing the primary visual language for the same product",
      "reason": "One expresses depth through soft translucent layers, the other expresses directness through hard outlines and color blocks; they rarely mix well.",
      "basis": "editorial"
    },
    {
      "target": "bento",
      "kind": "composes_with",
      "condition": "Organizing content in a card grid where cards need to float above the background",
      "reason": "The layout decides card position and size; the glass material only decides the card surface, so the two can be chosen independently.",
      "basis": "editorial"
    },
    {
      "target": "inclusive-design",
      "kind": "conflicts_when",
      "condition": "Text on translucent layers is not checked against the least favorable background, or the design ignores a user's reduce-transparency setting",
      "reason": "Low-vision users depend on stable contrast; a material effect should not come at the expense of legibility.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "Text or icons are placed on a translucent background",
      "instruction": "Verify 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.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Applying it across platforms or on performance-constrained devices",
      "instruction": "Prepare an opaque fallback for environments without background blur or with reduce-transparency enabled, and limit the number of glass layers on one screen.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "visual": {
    "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."
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "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.",
  "image": {
    "src": "/images/glassmorphism.webp",
    "alt": "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."
  },
  "searchTerms": [
    "半透明",
    "背景模糊",
    "层次",
    "毛玻璃",
    "对比度"
  ]
}