CSS Toggle Switch Generator
Accessible on/off toggle switches in pure CSS on a real checkbox.
About this tool
Adjust the width, height, knob padding, on and off colours, knob colour, rounding and animation speed while a live preview updates. Click the preview to try it, then copy the CSS and HTML.
Building switches that everyone can use
A toggle switch is just a checkbox with different styling, and building it that way keeps all the behaviour people rely on. It can be reached with Tab and toggled with Space, it submits with forms, and screen readers announce it. The generator hides the native input visually (not with display:none, which would remove it from the accessibility tree), draws the track and knob with a <span> and its ::after, and uses the :checked + .track selector to slide the knob and change colour. role="switch" makes assistive technology announce "on/off" rather than "checked". A :focus-visible outline shows keyboard users where they are, :disabled dims the switch, and prefers-reduced-motion removes the sliding animation for people who are sensitive to motion. Keep a visible text label next to the switch (or an aria-label), and make sure both states contrast at least 3:1 with the background, as WCAG 1.4.11 requires for UI components. Honest limits: switches should act immediately, like turning on Wi-Fi. For options saved with a Submit button, a normal checkbox is clearer. The CSS checkbox generator, the CSS button generator and the contrast checker are related.
Frequently asked questions
How do I make a toggle switch in CSS?
Style a hidden-but-accessible checkbox with a sibling span: :checked moves the knob. The generator writes the CSS for you.
Is a CSS toggle switch accessible?
Yes, if it's built on a real checkbox with a label, role="switch" and a visible focus style, as generated here.
Do I need JavaScript?
No. The switch works with pure CSS, and you only need JavaScript to react to changes.
Is anything stored or sent?
No. Everything is generated in your browser and nothing is stored or sent.