Liquid Glass

Styleplatform/material

dynamic material, optical glass, translucency, lensing, refraction, fluid morphing, system navigation. Best for Apple-platform navigation, controls, and system-aligned app chrome.

dynamic material optical glass translucency lensing refraction fluid morphing system navigation

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Liquid Glass

Keywords: dynamic material, optical glass, translucency, lensing, refraction, fluid morphing, system navigation
Primary colours: Adaptive translucent material derived from surrounding content; use color judiciously
Secondary colours: Semantic content and system tint colors; preserve legibility and hierarchy
Effects & animation: Lensing and refraction, adaptive translucency, and fluid morph transitions aligned to Apple platform behavior
Best for: Apple-platform navigation, controls, and system-aligned app chrome
Do not use for: content layers, dense reading surfaces, or custom effects without accessibility fallbacks

## Prompt keywords
Apply Apple Liquid Glass sparingly to navigation and controls. Use dynamic translucent material, lensing, and fluid transitions while keeping content clear. Respect reduced transparency and reduced motion settings.

## CSS / technical
platform material, adaptive translucency, lensing, refraction, reduced transparency, reduced motion

## Implementation checklist
☐ Use for navigation and controls, ☐ Keep content on a separate layer, ☐ Apply color judiciously, ☐ Test reduced transparency, ☐ Test reduced motion, ☐ Verify text and control contrast

## Design system variables
--material-role: navigation-controls, --translucency: adaptive, --tint: semantic, --reduced-transparency-fallback: opaque, --motion: platform-aligned

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source