Style · 17

Liquid Glass

Liquid glass = translucent layers that refract and catch a specular edge; glass that reacts to what is behind it.

Translucent layers with a specular edge.

North Search

Glass that reacts.

Glass that reacts to what is behind it. A frosted surface with a lit rim.

Glass panel

Surface

Frost

Translucent fill, 1px specular edge, backdrop blur.

React

Panels distort the content behind as they move.

Depth

Soft outer shadow, no hard drop, no neon.

Showcase

Product UI Liquid Glass

Floating bar Liquid Glass · Navbar

Frosted card Liquid Glass · Glassmorphism

Page Overall

Page

Formulas stay in English so you can paste them straight into your tool.

STYLE
- Liquid Glass: translucent panels with a 1px specular top edge, backdrop-filter blur(20px) saturate(180%), tinted frost
- Place frost over a vivid but soft background (a calm blue-to-violet gradient wallpaper) so each panel clearly refracts what is behind it
- Page ink #1C1C1E; accent blue #0A84FF; frost fill rgba(255, 255, 255, 0.42) light / rgba(28, 30, 34, 0.42) dark
- Border 1px solid rgba(255, 255, 255, 0.55) plus an inset 1px top highlight rgba(255, 255, 255, 0.7); radius 22px; shadow 0 12px 34px rgba(0, 0, 0, 0.18)
- Type: SF Pro / Inter for UI, a mono for code lines. No grunge, no neon

LAYOUT
- Container max-width 1120px. The hero sits on the gradient wallpaper; every block is a floating frosted panel, not a solid slab
- Top bar is floating chrome: wordmark left, three links, search field, primary CTA — all on glass, 12px off the top
- Nothing is a hard rectangle. Every surface shares the same blur and rim language

SECTIONS
1. Hero: a large frosted panel with headline "Glass that reacts.", kicker NEW, one dek line, primary CTA Start free plus ghost See the kit
2. Three frosted value cards on the wallpaper: Clarity, Motion, Depth — kicker, one line, Read more each
3. Feature band: two columns, left a frosted cover block, right a short list of four claims
4. Pricing strip: three frosted columns, the middle one tinted blue with a brighter rim
5. Closing CTA band: a wide frosted panel with one tinted CTA
6. Three-column frosted footer: Product / Company / Colophon

INTERACTION
- Hover lifts each panel 3px and tightens its frost; the specular rim brightens. Panels never snap or hard-drop
- Focus is a 2px solid #0A84FF outline, never a glow ring
- Content behind a panel should visibly blur and shift as the panel moves — that is the refraction read

MOTION
- Motion is soft and continuous: 200ms ease for lifts, a slow 6s drift on the wallpaper gradient
- Use ease-out, no steps, no hard stops. Panels settle, they do not bounce
- Entrance is a 10px rise with the frost fading in, staggered 60ms per card
- prefers-reduced-motion: no drift, no stagger, panels appear instantly

TECHNICAL
- React, Tailwind CSS, one .glass utility (backdrop-filter + rim highlight + shadow). One homepage route.

DON'Ts
- Do not call this glassmorphism: glassmorphism is a static frost, Liquid Glass has a lit rim and reacts to content behind it
- No true optical refraction claim — simulate with backdrop-filter; the web cannot bend light
- No neon, no gradient mesh inside panels, no pixel borders, no hard black shadows
- Do not output only a headline plus two empty cells. Do not make every panel fully opaque

Card

Formulas stay in English so you can paste them straight into your tool.

Build a single Liquid Glass card. Not a page, not a dashboard.

STYLE
- Liquid Glass: a translucent frosted panel with a 1px specular top edge and a soft outer shadow
- Fill rgba(255, 255, 255, 0.42) on light, rgba(28, 30, 34, 0.42) on dark, with backdrop-filter: blur(22px) saturate(180%)
- Border 1px solid rgba(255, 255, 255, 0.55); add an inset 1px top highlight rgba(255, 255, 255, 0.7) so light catches the rim
- Radius 22px. Outer shadow 0 10px 30px rgba(0, 0, 0, 0.18). Kicker and title in ink; kicker in system blue #0A84FF

LAYOUT
- One card only: kicker, title, one-line summary, one primary button
- No navbar, no secondary tiles, no image

INTERACTION
- Hover lifts the card 3px and tightens the frost; the specular edge brightens. Never a hard drop

CONSTRAINTS
- This is NOT flat glassmorphism: the edge must read as a lit rim, and the panel must clearly distort what is behind it
- Simulate refraction with backdrop-filter; do not claim true optical refraction, the web cannot do it
- No neon, no gradient mesh behind the card, no pixel borders

TECHNICAL
- React, Tailwind CSS, a single .glass utility (backdrop-filter + rim highlight). One component, no route

Buttons

Formulas stay in English so you can paste them straight into your tool.

Build a Liquid Glass button row only: Continue (solid tint), Save (frosted), Skip (ghost). Not a card, not a page.

STYLE
- Radius 999px. All three translucent: Continue fill rgba(10, 132, 255, 0.85) white label; Save fill rgba(255, 255, 255, 0.4) ink label with backdrop blur; Skip is text only
- Every button carries a 1px top specular highlight rgba(255, 255, 255, 0.7) and a 0 6px 18px rgba(0, 0, 0, 0.16) shadow
- Continue keeps a thin rim rgba(255, 255, 255, 0.5); Save keeps a full frost rim

LAYOUT
- One horizontal row, 12px gap. No card chrome, no helper text

INTERACTION
- Hover brightens the rim and lifts 2px. Active presses the frost tighter (scale 0.98)

CONSTRAINTS
- Frosted buttons must show the background through them; opaque fills break the language
- No square corners, no hard black shadow, no gradient text

TECHNICAL
- React, Tailwind CSS, reuse the .glass utility. Keep blur consistent across the three

Navbar

Formulas stay in English so you can paste them straight into your tool.

Build a Liquid Glass site navbar only. Not tabs, not a page.

STYLE
- A floating frosted bar: fill rgba(255, 255, 255, 0.4), backdrop-filter blur(20px), 1px rim rgba(255, 255, 255, 0.55), radius 18px, shadow 0 8px 24px rgba(0, 0, 0, 0.14)
- Wordmark NORTH in ink, weight 700. Links Product and Pricing in ink at 70% alpha
- CTA Start free: tinted blue rgba(10, 132, 255, 0.85), white label, pill, rim highlight

LAYOUT
- Single horizontal chrome: wordmark left, two links, CTA right. No panel below, no dropdown

INTERACTION
- Bar sits 12px off the top; hover lifts it 2px and the frost tightens. Links gain a 1px underline in ink

CONSTRAINTS
- The bar must float over content and show it through; a solid bar is the wrong style
- No thick borders, no neon, no gradient mesh

TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation into a floating .glass bar

Tabs

Formulas stay in English so you can paste them straight into your tool.

Build a Liquid Glass Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.

STYLE
- A frosted pill container holds the tablist; selected tab fill rgba(255, 255, 255, 0.7) with backdrop blur, ink label weight 600, 1px rim
- Unselected tabs are text only, ink at 60% alpha, no fill
- Panel: fill rgba(255, 255, 255, 0.42), backdrop blur, 1px rim, 18px radius, 0 10px 30px shadow

LAYOUT
- Horizontal pill tablist plus one panel below. No wordmark, no CTA

INTERACTION
- Switching tabs slides the frost fill; selected locks with a brighter rim. No bounce

CONSTRAINTS
- The panel and the selected tab must both read as glass; do not make the panel opaque
- No square tabs, no hard shadow, no neon

TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs into frosted pills

What is Liquid Glass?

Liquid glass refracts. Name a 1px specular highlight, a backdrop blur, and a tinted frost, then let the content behind show through. It is glassmorphism with a sharper edge and a sense of motion.

Elements

Translucent frosted layers
Specular top-edge highlight
backdrop-filter blur

Put this word in the prompt.

Typical colors

#0A84FF
#EAF1FF
#1C1C1E

Use on

Apple-style product UI
Floating control bars
Premium app surfaces

Prompt formula

[Component] + Liquid Glass + Translucent frost + Specular edge + backdrop blur

BUILD - Build a complete Liquid Glass marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs. - Domain from Use on: Apple-style product UI and premium app surfaces first; developer tools reuse the frost on floating bars. STYLE - Liquid Glass: translucent panels with a 1px specular top edge, backdrop-filter blur(20px) saturate(180%), tinted frost - Place frost over a vivid but soft background (a calm blue-to-violet gradient wallpaper) so each panel clearly refracts what is behind it - Page ink #1C1C1E; accent blue #0A84FF; frost fill rgba(255, 255, 255, 0.42) light / rgba(28, 30, 34, 0.42) dark - Border 1px solid rgba(255, 255, 255, 0.55) plus an inset 1px top highlight rgba(255, 255, 255, 0.7); radius 22px; shadow 0 12px 34px rgba(0, 0, 0, 0.18) - Type: SF Pro / Inter for UI, a mono for code lines. No grunge, no neon LAYOUT - Container max-width 1120px. The hero sits on the gradient wallpaper; every block is a floating frosted panel, not a solid slab - Top bar is floating chrome: wordmark left, three links, search field, primary CTA — all on glass, 12px off the top - Nothing is a hard rectangle. Every surface shares the same blur and rim language SECTIONS 1. Hero: a large frosted panel with headline "Glass that reacts.", kicker NEW, one dek line, primary CTA Start free plus ghost See the kit 2. Three frosted value cards on the wallpaper: Clarity, Motion, Depth — kicker, one line, Read more each 3. Feature band: two columns, left a frosted cover block, right a short list of four claims 4. Pricing strip: three frosted columns, the middle one tinted blue with a brighter rim 5. Closing CTA band: a wide frosted panel with one tinted CTA 6. Three-column frosted footer: Product / Company / Colophon INTERACTION - Hover lifts each panel 3px and tightens its frost; the specular rim brightens. Panels never snap or hard-drop - Focus is a 2px solid #0A84FF outline, never a glow ring - Content behind a panel should visibly blur and shift as the panel moves — that is the refraction read MOTION - Motion is soft and continuous: 200ms ease for lifts, a slow 6s drift on the wallpaper gradient - Use ease-out, no steps, no hard stops. Panels settle, they do not bounce - Entrance is a 10px rise with the frost fading in, staggered 60ms per card - prefers-reduced-motion: no drift, no stagger, panels appear instantly TECHNICAL - React, Tailwind CSS, one .glass utility (backdrop-filter + rim highlight + shadow). One homepage route. DON'Ts - Do not call this glassmorphism: glassmorphism is a static frost, Liquid Glass has a lit rim and reacts to content behind it - No true optical refraction claim — simulate with backdrop-filter; the web cannot bend light - No neon, no gradient mesh inside panels, no pixel borders, no hard black shadows - Do not output only a headline plus two empty cells. Do not make every panel fully opaque

Liquid Glass

Glass that reacts.

Frost

React

Depth

Liquid Glass

What is Liquid Glass?

Elements

Typical colors

Use on

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns