EspañolCSS toggle switch generator (on/off button)
Adjust the size and colors and test the preview. The code uses a real checkbox, so it works in forms and with the keyboard.
How to useAn on/off switch without JavaScript
Available in: 
CSS toggle switch generator (on/off button): what it is for
On/off switches are used in preferences, sign-up forms and settings. This generator makes the switch with a real checkbox styled with CSS, without JavaScript: it stores the state, works with keyboard and touch, is submitted with the form and is announced as on or off by screen readers thanks to role=switch.
You adjust width, height, corners and colors and test the result on, off and disabled. The code includes visible focus, a smooth transition that respects people who prefer less motion and high-contrast mode.
How to use
- Adjust the size and corners.
- Choose the colors and the label text.
- Copy the HTML and CSS.
When to use it
- Notification preferences.
- A site's dark mode.
- Accepting terms in a form.
Frequently asked questions
Why use a checkbox?
A checkbox already does everything a switch needs: it stores the state, receives focus, toggles with the space bar and is submitted with the form. The CSS only changes how it looks, and the role=switch attribute makes screen readers announce on and off.
Does it need JavaScript?
Not to work. Only if you want to do something the moment the switch changes, like saving the preference; then just listen for the input's change event.
What size should I use on phones?
The touch target should be at least 24 by 24 px according to WCAG 2.2, and around 44 px is recommended for fingers. Since the text next to it is part of the label, it increases the clickable area.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.