Menu

Component · overlay

Liquid glass popover

Rich floating panel anchored to a trigger.

A playback settings popover below a round icon trigger, with two switches and a small confirmation capsule, 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 (clearest overlay; strong bend at the rim)
Profile
bevel
Bezel (px)
22–24 (= radius)
Displacement (px)
0.4 × bezel (9–9.5)
Blur (px)
2–6

Geometry. radius 20–24, width 240–320, padding 16, optional arrow

Rules2
  • 6–8 px from the trigger.
  • Non-modal: no dim layer.
Anatomy4
  • glass panel
  • title 14 semibold + secondary description
  • flat rows with switches
  • small glass Done button bottom-right
States2
  • closed
  • open from trigger

Questions

What material is a liquid glass popover?

Regular (clearest overlay; strong bend at the rim) material with a bevel edge profile, in the overlay layer. Rich floating panel anchored to a trigger.

How big is a liquid glass popover?

Radius 20–24, width 240–320, padding 16, optional arrow.

What bezel, displacement and blur does it use?

Bezel 22–24 (= radius); displacement 0.4 × bezel (9–9.5); blur 2–6 (px).

Which states does a liquid glass popover need?

Closed; open from trigger.