Glass Radio

A frosted glass segmented selector whose glider overshoots as it lands on the chosen tier.

About this tool

A three-way segmented control on a frosted glass slab: a 6% white surface with a 12px backdrop blur and a three-layer bevel, and a glider that spans exactly one third of the track and slides between the silver, gold and platinum tones on an overshooting curve. It is a real radio group (the inputs stay in the accessibility tree and keep keyboard focus, so arrow keys and Tab work), and it renders with no JavaScript at all. Stage, glass, typography, every tone gradient and its halo, travel duration and overshoot are all editable.

In collections: Custom CSS Checkboxes & Radio Buttons Form Controls: Switches, Inputs & Selectors

UI/UX · HTML / CSS All tools

Options

Selected

one two three

Label 1

Label 2

Label 3

Glass

Glass tint

Backdrop blur px

Corner radius px

Bevel depth

Selection

Gradient start

Gradient end

Halo

Type

Label size px

Label colour

Active label

Motion

Halo strength

Glider travel ms

Overshoot

Stage

Stage colour

#ffffff