Liquid Glass.

Frosted panels with specular edges, morphing blobs and depth stacks. Every demo ships with its own animated colour bloom behind it — because glass only reads as glass when something is moving underneath.

28 componentsHover to copybackdrop-filterBloom included

Material

Glass panels

The recipe is always the same three ingredients: a translucent white fill, a bright hairline border and backdrop-blur. What sells it is the colour moving behind — flat backgrounds kill the effect.

9 variants

Liquid Glass

backdrop-blur-xl

Signature

Frosted panel

tsx

Specular

Specular edge

tsx

Depth

Inner glow

tsx

Violet tint

Tinted glass

tsx

Opaque frost

Heavy frost

tsx

Saturate 200%

Saturating glass

tsx

Layered

Stacked depth

tsx

Grain + glass

Noise glass

tsx

blob

Signature

Morphing blob

tsx

Interface

Glass controls

Buttons, sliding tabs, docks, players and modals. Each demo carries its own animated bloom so you can see the blur actually working.

10 variants

Glass button

tsx

Stateful

Sliding tabs

tsx

Glass input

tsx

◆●▲■

Dock

tsx

✦

Build passed

2 seconds ago

Notification

tsx

Slider

tsx

LiveDraft

Segmented pill

tsx

Avatar ring

tsx

Midnight City

❚❚

Player bar

tsx

Delete file?

Modal

tsx

Application

Chrome & data

Navbars, toasts, tooltips, stat tiles and bottom sheets — the frame around the content, rendered in the same material.

9 variants

HomeDocsGet

Glass navbar

tsx

✓

Copied to clipboard

Glass toast

tsx

Online

Glass badge

tsx

Stateful

Glass toggle

tsx

Glass progress

tsx

Shortcut: ⌘K

Glass tooltip

tsx

48.2k

Downloads

Glass stat

tsx

Glass grid

tsx

Share sheet

✉🔗↗

Bottom sheet

tsx

Liquid Glass.

28 componentsHover to copybackdrop-filterBloom included

Material

Glass panels

The recipe is always the same three ingredients: a translucent white fill, a bright hairline border and backdrop-blur. What sells it is the colour moving behind — flat backgrounds kill the effect.

9 variants

Liquid Glass

backdrop-blur-xl

Signature

Frosted panel

tsx

Specular

Specular edge

tsx

Depth

Inner glow

tsx

Violet tint

Tinted glass

tsx

Opaque frost

Heavy frost

tsx

Saturate 200%

Saturating glass

tsx

Layered

Stacked depth

tsx

Grain + glass

Noise glass

tsx

blob

Signature

Morphing blob

tsx

Interface

Glass controls

Buttons, sliding tabs, docks, players and modals. Each demo carries its own animated bloom so you can see the blur actually working.

10 variants

Glass button

tsx

Stateful

Sliding tabs

tsx

Glass input

tsx

◆●▲■

Dock

tsx

✦

Build passed

2 seconds ago

Notification

tsx

Slider

tsx

LiveDraft

Segmented pill

tsx

Avatar ring

tsx

Midnight City

❚❚

Player bar

tsx

Delete file?

Modal

tsx

Application

Chrome & data

Navbars, toasts, tooltips, stat tiles and bottom sheets — the frame around the content, rendered in the same material.

9 variants

HomeDocsGet

Glass navbar

tsx

✓

Copied to clipboard

Glass toast

tsx

Online

Glass badge

tsx

Stateful

Glass toggle

tsx

Glass progress

tsx

Shortcut: ⌘K

Glass tooltip

tsx

48.2k

Downloads

Glass stat

tsx

Glass grid

tsx

Share sheet

✉🔗↗

Bottom sheet

tsx