Menu

Component · controls

Liquid glass card

Grouping surface in the controls/overlay layer (settings group, playground card, widget panel).

A short statistics card beside a more frosted notes card with actions over a procedural backdrop.

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once
Material
regular · frost when it carries 3+ lines of body text, a form of text fields, or a long list (a few switches and a slider stay regular)
Profile
bevel
Bezel (px)
24–28 (= radius)
Displacement (px)
0.4 × bezel (9.5–11)
Blur (px)
2–6 regular / 10–20 frost

Geometry. radius 24–28, padding 16–22

Rules3
  • Do not use glass cards for feed or list items (posts, photos, messages) — content stays in the content layer. A few summary modules floating over a wallpaper (weather, home widgets, a dashboard's metrics) may be glass cards.
  • Controls inside a card are separate bodies (lens buttons, trough inputs), not a card-in-card.
  • Stat tiles, chips and badges inside the card are flat fills (white/black 8–12 %), not glass.
Anatomy2
  • glass panel
  • flat content: headings, rows, flat inputs or separate small lenses with gaps
States2
  • rest
  • drag (if draggable): lifts with stronger shadow

Questions

What material is a liquid glass card?

Regular · frost when it carries 3+ lines of body text, a form of text fields, or a long list (a few switches and a slider stay regular) material with a bevel edge profile, in the controls layer. Grouping surface in the controls/overlay layer (settings group, playground card, widget panel).

How big is a liquid glass card?

Radius 24–28, padding 16–22.

What bezel, displacement and blur does it use?

Bezel 24–28 (= radius); displacement 0.4 × bezel (9.5–11); blur 2–6 regular / 10–20 frost (px).

Which states does a liquid glass card need?

Rest; drag (if draggable): lifts with stronger shadow.