Design a fully clickable checkbox toggle switch. Set colors, shape, size and icons, try it live, then copy clean HTML and CSS.
No fake screenshots — click the preview to toggle it and see the exact transition your copied CSS will produce.
Built on an actual input[type=checkbox], so it works with keyboard and screen readers.
Style the track, thumb, on/off colors and pick pill or square corners.
Get the exact HTML and CSS, including the :checked rules.
A toggle switch is one of the oldest CSS tricks in the book, and one of the most useful: a native checkbox is visually hidden, a label styled to look like a track and thumb takes its place, and the CSS :checked pseudo-class does the rest of the work by changing colors and sliding the thumb with a transform. Because the underlying control is still a real checkbox, the switch keeps native keyboard support, focus states and screen-reader semantics for free, which is exactly what you lose if you build the same visual with plain divs and a click handler instead.
The checkbox is set to opacity:0 and a fixed 1px size rather than display:none, so it stays focusable and clickable.
input:checked + .track targets the track only when its sibling checkbox is checked, no JavaScript required for the visual state.
Animating the thumb's left position (or a transform) with a short transition produces the classic sliding motion.
A small check or cross inside the thumb reinforces the current state for users who may not perceive color alone.
Yes. It is built from a real checkbox input paired with a label, so it is keyboard-focusable, works with the Space key, and is announced correctly by screen readers as a checkbox.
The generated CSS uses the input:checked sibling selector to change the track color and slide the thumb across with a transform transition, entirely in CSS with no script required.
Yes. Turning on icons adds two small glyphs inside the thumb whose opacity is controlled by the same checked selector, so the correct icon fades in for the current state.
Yes. Choose a pill or rounded-square shape and a small, medium or large size, and both the preview and the copied CSS update to match.
Yes. It is completely free, requires no account, and builds all HTML and CSS locally in your browser.
Keep building interface components with these free online tools.