Menu

Component · controls

Liquid glass widget

Glanceable home/lock-screen or dashboard tile.

Weather, weekly activity chart and battery widgets side by side 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 or clear with dim
Profile
bevel
Bezel (px)
20–24 (= radius)
Displacement (px)
0.4 × bezel (8–9.5)
Blur (px)
3–8

Geometry. iOS widget radius 22–24 (small 158², medium 338×158)

Rules1
  • Big white or dark numerals; contrast checked over the wallpaper.
Anatomy3
  • glass tile
  • large flat numerals/labels
  • flat charts
States1
  • rest

Questions

What material is a liquid glass widget?

Regular or clear with dim material with a bevel edge profile, in the controls layer. Glanceable home/lock-screen or dashboard tile.

How big is a liquid glass widget?

IOS widget radius 22–24 (small 158², medium 338×158).

What bezel, displacement and blur does it use?

Bezel 20–24 (= radius); displacement 0.4 × bezel (8–9.5); blur 3–8 (px).

Which states does a liquid glass widget need?

Rest.