Menu

Component · overlay

Liquid glass toast

Transient feedback.

Two stacked notification cards at the lower right, with a solid trigger button at the top left, over zoomed desert ridges.

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
Profile
bevel
Bezel (px)
18 (= radius)
Displacement (px)
0.4 × bezel (7)
Blur (px)
3–8

Geometry. capsule or 16-radius card 48–64 tall, width 280–360; column with 8 px gaps

Rules2
  • A stack is a lens on a lens: lay toasts out in a column, never overlapping.
  • Everything inside the toast is flat.
Anatomy4
  • glass body
  • flat title + secondary line
  • flat close ×
  • optional small action
States3
  • enter (slide + scale from 0.96)
  • rest
  • swipe to dismiss

Questions

What material is a liquid glass toast?

Regular material with a bevel edge profile, in the overlay layer. Transient feedback.

How big is a liquid glass toast?

Capsule or 16-radius card 48–64 tall, width 280–360; column with 8 px gaps.

What bezel, displacement and blur does it use?

Bezel 18 (= radius); displacement 0.4 × bezel (7); blur 3–8 (px).

Which states does a liquid glass toast need?

Enter (slide + scale from 0.96); rest; swipe to dismiss.