This writes the CSS for a toggle switch driven by a single checkbox. Enter a width, a height, a knob inset and colors, and the knob diameter and travel distance are computed into the declarations, with a preview above you can actually click.
The structure is a label wrapping an input[type=checkbox] and a span: the input is kept visually hidden, and :checked plus a sibling selector restyles the span. The knob diameter is the height minus twice the inset, and the distance it travels when switched on is the width minus the height. A :focus-visible outline declaration is included for keyboard users. Selector behavior follows W3C CSS Selectors Level 4 (as of October 2026).
No recommended transition time or curve is offered; whatever you enter is written verbatim. This tool does not produce label text, state announcements or disabled-state styling. To respect a reduced-motion preference, add a prefers-reduced-motion block of your own.
Frequently asked questions
Leaving the checked state to the browser keeps keyboard operation, form submission and assistive-technology output intact. Only the appearance moves to the sibling span.
No. An input set to display: none cannot take focus, so it can never be toggled from the keyboard. Shrink it to 1px and set opacity to 0 instead.
This tool does not recommend one. It writes whatever you enter into the code, and entering 0 means the switch flips instantly with no animation.