Industry-coined trend

Glassmorphism

Translucent blurred cards placed over a vivid backdrop.

Also called: frosted glass UI, frosted panels

Frosted panel over a controlled colorful backdrop.

Understand

Definition and scope

Glassmorphism uses translucent panels, backdrop blur, and a light edge to create decorative depth. The backdrop visible through the glass supplies much of the palette.

Scope: This style covers generic glass surfaces such as cards and dashboards. It does not name Apple’s adaptive Liquid Glass material.

Recognize

The four defining signals should remain visible without relying on the style name.

Surface

Frosted panels

A semi-transparent surface blurs what passes behind it without hiding it completely.

Color

Visible vivid backdrop

An image or saturated gradient remains visible through the panels and carries the palette.

Geometry

Thin light edge

A subtle light stroke separates the glass from neighboring surfaces.

Depth

Floating layers

Wide soft shadows show several stacked sheets of glass.

Choose

Good context

An editorial or media surface with a controlled backdrop and little critical text.
A secondary layer that should remain visually connected to the content behind it.

Misuse

Stacking text, forms, and glass cards over an unpredictable backdrop.
Applying glass to every surface until hierarchy disappears.

Compare

Decisive difference with the closest neighbor

Glassmorphism vs Liquid GlassGlassmorphism decorates content surfaces. Liquid Glass reserves an adaptive material for Apple controls and navigation.

Understand → Recognize → Choose → Compare

Pack for your agent

Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

implementation

Implement in your agent

# Implement Glassmorphism in your agent

## Objective
Create this surface with glassmorphism. Use semi-transparent panels with backdrop-filter, a visible colorful backdrop, a 1px light edge, and soft shadows. Provide a near-opaque fallback when blur or transparency is reduced.

## Prerequisites
- Inspect existing components, tokens, and brand constraints.
- Confirm that this style fits the surface and content.
- Preserve existing structure, semantics, and interactions.

## Behavior and surfaces
- Frosted panels — A semi-transparent surface blurs what passes behind it without hiding it completely.
- Visible vivid backdrop — An image or saturated gradient remains visible through the panels and carries the palette.
- Thin light edge — A subtle light stroke separates the glass from neighboring surfaces.
- Floating layers — Wide soft shadows show several stacked sheets of glass.

## States
- Cover existing default, hover, focus, active, disabled, loading, and error states.
- Provide a static state when reduced motion is requested.

## Accessibility
- Measure contrast against the worst backdrop region, not its average color.
- Provide a near-opaque surface when transparency or blur is unavailable.
- Do not let blur be the only signal separating two interactive regions.

## Non-goals
- Stacking text, forms, and glass cards over an unpredictable backdrop.
- Applying glass to every surface until hierarchy disappears.

## Acceptance criteria
- An editorial or media surface with a controlled backdrop and little critical text.
- A secondary layer that should remain visually connected to the content behind it.

sha256:81dffa61c30954be5b56d17d9820311eb9b80dc1d4447ceea482b09786b07d47

debugging

Debug in your agent

# Debug Glassmorphism in your agent

## Observed symptom
[DÉCRIS ICI LE SYMPTÔME]

## Observable checks
- Compare the surface with the documented visual signals.
- Verify contrast, focus, reduced motion, and fallback behavior.
- Isolate the visual layer without changing functional structure.

## Possible causes
- The style hides hierarchy or reduces contrast.
- The effect is applied to too many surfaces or depends on an unavailable API.
- An interactive state is no longer perceivable.

## Bounded corrections
Repair this glassmorphism without adding more glass. Make the backdrop visible, limit the treatment to secondary surfaces, increase opacity behind text, and add a fallback without backdrop-filter.

## Final verification
- Measure contrast against the worst backdrop region, not its average color.
- Provide a near-opaque surface when transparency or blur is unavailable.
- Do not let blur be the only signal separating two interactive regions.

sha256:44965100abe080f23cc3c53edd1179ad72deee73aac81007589d407c76309e8f

Pack digest: sha256:e1381035be3ea7204e1de7126903a11538cb9f07bd0b2a4220c02709194fbdb2

Accessibility and verification

1Measure contrast against the worst backdrop region, not its average color.
2Provide a near-opaque surface when transparency or blur is unavailable.
3Do not let blur be the only signal separating two interactive regions.

Sources

Editorial revision: 1.2.2
Sources consulted on: 2026-07-20
Source catalog digest: sha256:6e047c91ac34b3558576dea986805be6086c1a5a18ed2ed27fa1e56214cef304; sha256-utf8-canonical-json-lf/v1

Open the versioned source catalog

Choose

Good context

An editorial or media surface with a controlled backdrop and little critical text.
A secondary layer that should remain visually connected to the content behind it.

Misuse

Stacking text, forms, and glass cards over an unpredictable backdrop.
Applying glass to every surface until hierarchy disappears.

# Implement Glassmorphism in your agent ## Objective Create this surface with glassmorphism. Use semi-transparent panels with backdrop-filter, a visible colorful backdrop, a 1px light edge, and soft shadows. Provide a near-opaque fallback when blur or transparency is reduced. ## Prerequisites - Inspect existing components, tokens, and brand constraints. - Confirm that this style fits the surface and content. - Preserve existing structure, semantics, and interactions. ## Behavior and surfaces - Frosted panels — A semi-transparent surface blurs what passes behind it without hiding it completely. - Visible vivid backdrop — An image or saturated gradient remains visible through the panels and carries the palette. - Thin light edge — A subtle light stroke separates the glass from neighboring surfaces. - Floating layers — Wide soft shadows show several stacked sheets of glass. ## States - Cover existing default, hover, focus, active, disabled, loading, and error states. - Provide a static state when reduced motion is requested. ## Accessibility - Measure contrast against the worst backdrop region, not its average color. - Provide a near-opaque surface when transparency or blur is unavailable. - Do not let blur be the only signal separating two interactive regions. ## Non-goals - Stacking text, forms, and glass cards over an unpredictable backdrop. - Applying glass to every surface until hierarchy disappears. ## Acceptance criteria - An editorial or media surface with a controlled backdrop and little critical text. - A secondary layer that should remain visually connected to the content behind it.

# Debug Glassmorphism in your agent ## Observed symptom [DÉCRIS ICI LE SYMPTÔME] ## Observable checks - Compare the surface with the documented visual signals. - Verify contrast, focus, reduced motion, and fallback behavior. - Isolate the visual layer without changing functional structure. ## Possible causes - The style hides hierarchy or reduces contrast. - The effect is applied to too many surfaces or depends on an unavailable API. - An interactive state is no longer perceivable. ## Bounded corrections Repair this glassmorphism without adding more glass. Make the backdrop visible, limit the treatment to secondary surfaces, increase opacity behind text, and add a fallback without backdrop-filter. ## Final verification - Measure contrast against the worst backdrop region, not its average color. - Provide a near-opaque surface when transparency or blur is unavailable. - Do not let blur be the only signal separating two interactive regions.