UI Lingo
Shortlist 0

Liquid Glass

Also called: Apple Liquid Glass, iOS 26 glass, Refractive glass

Thick, clear glass capsules with bright specular rims that float over vivid photography and bend the light behind them.

“Thick lens glass”Soft & DimensionalEra: 2025 →DreamyLuxuryCalmTechy
Open full screen ↗
liquid-glass / landingEN
liquid-glass / landingTH
Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Colours · Light

    Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

    Design keywords

    Say these words to ask for this style.

    clear thick glassspecular rim highlightlens edge glowfloating capsule controlsfull-bleed vivid imageryglass tab bar dropletcontinuous cornerstinted glass primary button

    Liquid Glass is Apple’s 2025 material: controls are slabs of clear, thick glass rather than frosted sheets. Each panel has a bright specular rim that catches light on the top-left and bottom-right, a lens-like glow along its inner edge and a glossy top sheen. Controls are capsules that float away from the screen edges over full-bleed, colourful imagery, so the picture is the colour and the glass stays almost colourless.

    Best for

    • Travel, hotel and booking apps over destination photography
    • Media players and camera/photo apps
    • Premium consumer apps that follow iOS/visionOS conventions
    • Maps, weather and widgets over live content

    Avoid for

    • Dense admin tables and long reading pages
    • Low-end Android and old browsers (blur + layered shadows are costly)
    • Brands without strong imagery to sit behind the glass

    ✓ Do

    • Put the colour in a full-bleed photo or scene; keep the glass nearly clear (white 35–55%), except the highlighted plan/CTA, which is blue→teal tinted glass
    • Give every glass panel a 1px bright rim, brighter at top-left, plus a soft inner edge glow
    • Float controls as capsules 12–16px away from screen edges
    • Reserve tinted blue glass for main CTAs; repeated card/plan actions use clear glass

    ✕ Don't

    • Don’t frost the glass into a flat grey blur — it must stay clear and lit
    • Don’t stack glass on glass more than two levels deep
    • Don’t use hard square corners or heavy dark drop shadows
    • Don’t put body text directly on busy imagery without a glass slab behind it

    Not to be confused with

    Glassmorphism →Glassmorphism is a flat, frosted translucent sheet over dark colour blobs; Liquid Glass is clear, thick and edge-lit with specular rims, floating as capsules over real imagery.Spatial UI (visionOS) →Spatial UI stacks large glass windows in 3D space with depth and ornaments; Liquid Glass is the flat-screen material — capsule controls and tab bars hugging a 2D photo.Frutiger Aero →Frutiger Aero uses glossy blue-green gradients, bubbles and saturated plastic buttons; Liquid Glass is colourless, clear glass that borrows all colour from the content behind it.

    On mobile

    Make the photo full-bleed under the status bar and float the tab bar as a glass capsule 16px above the bottom edge, with the active tab as a brighter glass droplet. Limit live blur to the tab bar, app bar buttons and one hero card; lists use near-opaque glass (white 70%) for readability and speed.

    Prompt builder

    Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

    Audit
    ✓ Passed
    Rounds
    2
    Builder
    unknown
    Auditor
    unknown
    Copied!
    ↑ ↓ to move · Enter to open · Esc to close