Menu

Component · controls

Liquid glass switch

Binary setting.

Four switch rows showing on, off, held thumb and disabled states in a glass panel 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
track: flat/tinted (off grey 30 %, on accent) · knob: white capsule, becomes a clear lens while dragged
Profile
convex knob
Bezel (px)
knob h/2
Displacement (px)
0.5 × knob h/2 while dragged (convex, up to 0.6)
Blur (px)
0

Geometry. track 46×26 (desktop) or 64×28 (iOS 26 style); knob height = track height − 4, knob width = 1.15–1.3 × knob height (capsule), inset 2 — scale with the track

Rules1
  • The knob is the only lens; the track is flat.
Anatomy3
  • track
  • knob
  • row label on the left
States4
  • off
  • on
  • drag: knob grows 1.3× and turns to clear glass refracting the track
  • disabled 40 %

Questions

What material is a liquid glass switch?

Track: flat/tinted (off grey 30 %, on accent) · knob: white capsule, becomes a clear lens while dragged material with a convex knob edge profile, in the controls layer. Binary setting.

How big is a liquid glass switch?

Track 46×26 (desktop) or 64×28 (iOS 26 style); knob height = track height − 4, knob width = 1.15–1.3 × knob height (capsule), inset 2 — scale with the track.

What bezel, displacement and blur does it use?

Bezel knob h/2; displacement 0.5 × knob h/2 while dragged (convex, up to 0.6); blur 0 (px).

Which states does a liquid glass switch need?

Off; on; drag: knob grows 1.3× and turns to clear glass refracting the track; disabled 40 %.