Liquid Glass — Style Detail, Prompt and CSS

About This Style

Liquid Glass is the successor to glassmorphism. Where glassmorphism only blurred what sat behind a panel, this style bends it: edges catch a bright rim, the surface refracts slightly, and layers appear to float at genuinely different depths rather than sitting on one plane.

The visual work is done by three things working together — a blurred backdrop, a specular top edge, and a subtle inner highlight that reads as thickness. Remove any one and it collapses back into a flat translucent rectangle.

blur: 24px saturate: 160% radius: 24px rim: 1px top-lit inset highlight: 1px max 2 layers

Main Features:

Backdrop blur plus saturation: The panel filters what is behind it; increasing saturation slightly stops the colour from going muddy under blur.
Specular rim: A 1px light border that is brighter at the top than the bottom, imitating light catching a bevel.
Inner thickness: A faint inset highlight along the top edge sells the illusion that the surface has depth.
Layered depth: Two or three planes at distinct elevations, not one panel over a flat background.
Generous radius: 20–28px. Sharp corners read as plastic, and the material metaphor breaks.

Example AI Prompt

Design a Liquid Glass interface layer.

Material:
- Panels use backdrop-filter: blur(24px) saturate(160%) over a saturated, slightly out-of-focus background.
- Border: 1px solid rgba(255,255,255,0.35) at the top fading to rgba(255,255,255,0.08) at the bottom — the rim must be brighter where light would hit it.
- Add a second inset highlight: box-shadow inset 0 1px 0 rgba(255,255,255,0.55), to give the surface apparent thickness.
- Radius 24px, consistent on every panel.

Depth:
- Two distinct elevations maximum. The primary panel sits closer; a secondary control strip sits behind it with 40% less blur.
- Do not use drop shadows for depth. Elevation is communicated by blur strength and rim brightness, not by a dark halo.

Constraints:
- Text on glass must hold 4.5:1 contrast against the brightest region the background can reach — test with the background at maximum saturation.
- Provide a solid fallback background behind the panel for browsers without backdrop-filter.
- Never stack more than two glass layers; a third turns the interface into frosted soup.
- Respect prefers-reduced-transparency where available and fall back to an opaque surface.

Theme CSS Snippets

Liquid Glass theme variables. The inset highlight lives in --card-shadow so every panel inherits the top-edge light without repeating the declaration.

body.theme-liquid-glass {
    --page-bg: #0b1020;
    --page-bg-gradient: radial-gradient(circle at 25% 10%, #2b3fa0, transparent 55%), radial-gradient(circle at 80% 80%, #7a2f9e, transparent 55%);
    --text-color: #e8eefc;
    --heading-color: #ffffff;
    --link-color: #9fc2ff;
    --border-color: rgba(255, 255, 255, .28);
    --card-bg: rgba(255, 255, 255, .10);
    --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
    --card-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 30px -18px rgba(0, 0, 0, .8);
    --header-bg: rgba(11, 16, 32, .55);
    --header-text-color: #ffffff;
    --prompt-bg: rgba(255, 255, 255, .12);
    --prompt-text-color: #dbe6ff;
    --button-bg: rgba(255, 255, 255, .92);
    --button-text-color: #0b1020;
    --button-hover-bg: #ffffff;
    --card-border-radius: 24px;
    --base-font: var(--font-inter);
    --heading-font: var(--font-inter);
}

Where it fits

Use it when

Media-rich hero sections where a photograph or video sits behind the interface.
Overlay surfaces — command palettes, floating toolbars, media controls — where context must stay visible.
Product showcases for spatial or AR-adjacent software.

Avoid it when

Long text pages. Blur behind paragraphs constrains reading speed and hurts contrast.
Low-end mobile devices: stacked backdrop-filter layers are one of the most expensive effects in CSS.
Any surface where the user must read dense data — a table on glass is unreadable by design.

Resource Download

A working single-page demo in this style — the HTML and one self-contained stylesheet, no build step.

Download liquid-glass.zip