Neumorphic I/O switch

A hardware-style toggle built from stacked CSS layers: a rim that sinks the track, a studded knob made from a 4 px conic-gradient tile, an orange backing that slides in beneath the shadow, and I / O marks that ride the same belt as the knob. The ON lamp waits for the slide to finish, then flickers on; switching off, it flickers out. Pure CSS state through :has().

What it is

A toggle switch that feels like a piece of hardware: a studded metal knob slides across a recessed track, an orange backing follows it in, and a small ON lamp flickers to life once the switch has landed. Built entirely in CSS, it suits product pages, settings screens and dashboards that want a tactile, premium feel instead of a flat checkbox.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

@原子软糖At (Douyin) · 「第 10 集：30s 教你做一个好看的拟态开关」