Updated: Jul 19, 2026
Version: v1.3.0
Sources: 3 sources
Status: Published

Terminology classification · Vendor design language

Liquid Glass

Apple controls float like lenses above opaque content.

Also called: Apple Liquid Glass, iOS 26 glass design

Web approximation: glass controls above opaque content.

Understand

Definition and scope

Liquid Glass is Apple’s adaptive material for controls and navigation. It visually lenses underlying content, adapts its tint, and reserves glass for the control layer.

Scope: The name refers to an Apple vendor language and APIs. On the web, any reproduction remains an approximation and must be labeled as such.

Recognize

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

Layout

Glass reserved for controls

Bars, buttons, and navigation float above content that remains opaque.

Depth

Lensing effect

Edges concentrate light and suggest refraction richer than a simple blur.

Color

Adaptive tint

The material adjusts its appearance to the content passing underneath.

Geometry

Concentric capsules

Controls use capsules and nested radii that share an optical center.

Choose

Good context

An Apple app using system navigation and control components.
A control layer that must remain distinct from scrolling content.

Misuse

Presenting a CSS blur and transparency recipe as an official Apple API.
Making content cards transparent instead of limiting glass to controls.

Compare

Decisive difference with the closest neighbor

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

Ready-to-use briefs

Choose the intent that matches your work, then copy this static brief into your agent.

Create

Create this interface with native Liquid Glass APIs on Apple platforms. Reserve the material for floating controls and navigation. Keep content opaque, readable, and structurally independent from the material.

Modify

Modify existing bars and controls to adopt Liquid Glass without turning content cards into glass. Reuse system components, coherent capsules, and the platform’s adaptive behavior.

Repair

Repair this implementation by removing glass from content surfaces. On Apple, replace imitations with system APIs. On the web, label it as an approximation and add an opaque fallback.

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.

Implement correctly

Create a coherent Liquid Glass direction

# Implement Liquid Glass in your agent

## Objective
Create this interface with native Liquid Glass APIs on Apple platforms. Reserve the material for floating controls and navigation. Keep content opaque, readable, and structurally independent from the material.

## 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
- Glass reserved for controls — Bars, buttons, and navigation float above content that remains opaque.
- Lensing effect — Edges concentrate light and suggest refraction richer than a simple blur.
- Adaptive tint — The material adjusts its appearance to the content passing underneath.
- Concentric capsules — Controls use capsules and nested radii that share an optical center.

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

## Accessibility
- Test legibility over every kind of content that may scroll under the material.
- Honor Reduce Transparency and Reduce Motion settings.
- Keep focus and selection states that do not depend on refraction alone.

## When not to use
- Presenting a CSS blur and transparency recipe as an official Apple API.
- Making content cards transparent instead of limiting glass to controls.

## Acceptance criteria
- An Apple app using system navigation and control components.
- A control layer that must remain distinct from scrolling content.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Requires · Existing tokens, components, and brand constraints

Why it works

The style is framed by signals and surfaces, not just a visual reference.
States and fallbacks preserve use when motion or an API is unavailable.
Accessibility and performance criteria prevent aesthetics from becoming debt.

Try next

Audit Liquid Glass in the product

# Audit Liquid Glass on the real surface

## Objective
Check that Liquid Glass remains consistent, accessible, and measured on the components that actually use it.

## Checks
- Compare interactive states and fallbacks.
- Check contrast, focus, and reduced motion.
- Report visual effects that weaken hierarchy or performance.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

StyleGlassmorphism

sha256:56cf03d7ae54c94c3793b69679e0e734b4191504aeab8f70999f9ac4e749ce8d

Diagnose a problem

Fix Liquid Glass inconsistencies

# Debug Liquid Glass in your agent

## Observed symptom
[DESCRIBE THE SYMPTOM HERE]

## 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 implementation by removing glass from content surfaces. On Apple, replace imitations with system APIs. On the web, label it as an approximation and add an opaque fallback.

## Final verification
- Test legibility over every kind of content that may scroll under the material.
- Honor Reduce Transparency and Reduce Motion settings.
- Keep focus and selection states that do not depend on refraction alone.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Requires · Existing tokens, components, and brand constraints

Why it works

The diagnosis compares observable signals instead of judging taste.
The visual layer is isolated to preserve structure and interactions.
The fix stays tied to fallbacks, contrast, and interactive states.

Try next

Stabilize Liquid Glass in the design system

# Prevent Liquid Glass drift

## Objective
Turn the visual fix into a reusable rule and focused check without freezing the whole interface.

## Checks
- Isolate the responsible tokens or variants.
- Add focused evidence for the affected states.
- Compare nearby styles before widening the rule.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

StyleGlassmorphism

sha256:a65f3691798084689bd858061b8584c4fc1a1be28077959465fa522495d48dc5

Pack digest: sha256:f6980e9b6c1500827f012e629712604929f72d6c78442d8dcd09b70f889bb7e0

Accessibility and verification

1Test legibility over every kind of content that may scroll under the material.
2Honor Reduce Transparency and Reduce Motion settings.
3Keep focus and selection states that do not depend on refraction alone.

Sources

Content revision: 1.3.0
Sources consulted on: 2026-07-20
Source catalog digest: sha256:e2e112ed9b0cabe7c6e72351765c2d7c1d0d309274926a8b1efe2aa9aa4f66b6; sha256-utf8-canonical-json-lf/v1

Open the versioned source catalog

# Implement Liquid Glass in your agent ## Objective Create this interface with native Liquid Glass APIs on Apple platforms. Reserve the material for floating controls and navigation. Keep content opaque, readable, and structurally independent from the material. ## 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 - Glass reserved for controls — Bars, buttons, and navigation float above content that remains opaque. - Lensing effect — Edges concentrate light and suggest refraction richer than a simple blur. - Adaptive tint — The material adjusts its appearance to the content passing underneath. - Concentric capsules — Controls use capsules and nested radii that share an optical center. ## States - Cover existing default, hover, focus, active, disabled, loading, and error states. - Provide a static state when reduced motion is requested. ## Accessibility - Test legibility over every kind of content that may scroll under the material. - Honor Reduce Transparency and Reduce Motion settings. - Keep focus and selection states that do not depend on refraction alone. ## When not to use - Presenting a CSS blur and transparency recipe as an official Apple API. - Making content cards transparent instead of limiting glass to controls. ## Acceptance criteria - An Apple app using system navigation and control components. - A control layer that must remain distinct from scrolling content. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.

# Audit Liquid Glass on the real surface ## Objective Check that Liquid Glass remains consistent, accessible, and measured on the components that actually use it. ## Checks - Compare interactive states and fallbacks. - Check contrast, focus, and reduced motion. - Report visual effects that weaken hierarchy or performance. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.

# Debug Liquid Glass in your agent ## Observed symptom [DESCRIBE THE SYMPTOM HERE] ## 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 implementation by removing glass from content surfaces. On Apple, replace imitations with system APIs. On the web, label it as an approximation and add an opaque fallback. ## Final verification - Test legibility over every kind of content that may scroll under the material. - Honor Reduce Transparency and Reduce Motion settings. - Keep focus and selection states that do not depend on refraction alone. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.

# Prevent Liquid Glass drift ## Objective Turn the visual fix into a reusable rule and focused check without freezing the whole interface. ## Checks - Isolate the responsible tokens or variants. - Add focused evidence for the affected states. - Compare nearby styles before widening the rule. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.