About this tool
Draw an on-off switch and copy the CSS.
Set the track width and the on color. The knob sits at the right when the preview is on and at the left when it is off. The CSS uses a rounded track and a white circle. Copy it next to a real button or checkbox in your page.
The preview does not submit a form and it does not remember the state after you leave. Screen readers will not treat the painted span as a switch. Pair the look with a native control if the choice must be announced.
Read the privacy line on this page before you use the result in public.
Quick steps
- Draw an on-off switch and copy the CSS.
- Set the track width and the on color. The knob sits at the right when the preview is on and at the left when it is off. The CSS uses a rounded track and a white circle. Copy it next to a real button or checkbox in your page.
- The preview does not submit a form and it does not remember the state after you leave. Screen readers will not treat the painted span as a switch. Pair the look with a native control if the choice must be announced.
Read the privacy line on this page before you use the result in public.
FAQ
Draw an on-off switch and copy the CSS.
Set the track width and the on color. The knob sits at the right when the preview is on and at the left when it is off. The CSS uses a rounded track and a white circle. Copy it next to a real button or checkbox in your page.
The preview does not submit a form and it does not remember the state after you leave. Screen readers will not treat the painted span as a switch. Pair the look with a native control if the choice must be announced.
Read the privacy line on this page before you use the result in public.