Menu

Component · overlay

Liquid glass sheet

Task surface from the bottom (mobile) or side.

A floating bottom sheet with a grabber, a title, two actions and a short body line, over a street map with a route inside a phone frame.

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
frost
Profile
bevel
Bezel (px)
28
Displacement (px)
0.4 × bezel (11)
Blur (px)
12–20

Geometry. inset from screen edges 8 px (iOS 26 floating sheet), top radius 28–36, grabber 36×5 capsule at top

Rules2
  • A modal sheet dims the world behind it; the sheet itself refracts at its rim.
  • Avoid an opaque solid panel that hides all backdrop.
Anatomy4
  • dim the world behind a modal sheet; a non-modal peek sheet (map, player) leaves it undimmed and interactive
  • frosted sheet
  • grabber
  • flat content
States3
  • collapsed/peek
  • expanded (becomes more opaque)
  • dragging: follows the finger with spring

Questions

What material is a liquid glass sheet?

Frost material with a bevel edge profile, in the overlay layer. Task surface from the bottom (mobile) or side.

How big is a liquid glass sheet?

Inset from screen edges 8 px (iOS 26 floating sheet), top radius 28–36, grabber 36×5 capsule at top.

What bezel, displacement and blur does it use?

Bezel 28; displacement 0.4 × bezel (11); blur 12–20 (px).

Which states does a liquid glass sheet need?

Collapsed/peek; expanded (becomes more opaque); dragging: follows the finger with spring.