Shape the switch, test it in the preview, then copy the HTML and CSS. It's a real checkbox underneath, so it works with keyboards, screen readers, and forms. Everything runs in your browser.
How to use the CSS toggle generator
- Pick a preset as a starting point, or keep the default.
- Adjust size, color, and motion. The preview updates as you go, so click the switch to watch the animation with your settings.
- Set the label text and a class name that fits your project. Turn on Use CSS variables if you want to retheme the switch later without coming back here.
- Copy the HTML and CSS into your page, or download a standalone demo file to test on its own.
What the generated code does
Each switch is a real checkbox inside a <label>. The checkbox is hidden visually but stays in the page, so it still takes keyboard focus, flips with the Space key, submits with forms, and reports its state to screen readers. The role="switch" attribute tells assistive technology to announce it as an on/off switch rather than a checkbox.
The track is a <span>, and the knob is drawn with the track's ::after pseudo-element. When the box is checked, the sibling selector input:checked + span changes the track color and slides the knob with transform: translateX(). Transforms animate smoothly because they don't force the browser to recalculate layout.
The CSS also includes a :focus-visible outline for keyboard users, a dimmed disabled state, and a prefers-reduced-motion rule that removes the slide for people who've asked their device for less motion. The switch itself needs no JavaScript.
Reading the switch with JavaScript or a form
Because it's a checkbox, you read it the same way. Listen for the change event and check the checked property:
const sw = document.querySelector('.toggle__input');
sw.addEventListener('change', () => {
console.log(sw.checked ? 'on' : 'off');
});To send it with a form, add name and value attributes to the input. Like any checkbox, it's only included in the submitted data when it's on.
Frequently asked questions
Is the generated toggle accessible?
Yes. It uses a native checkbox with role="switch", a visible label (or an aria-label if you hide the label), a keyboard focus ring, and a reduced-motion rule. Check that your chosen colors have enough contrast against your page background, especially the off-state track.
Why a checkbox instead of a button?
A checkbox already has on/off state, keyboard support, and form submission built in, so pure CSS can style it without any script. A <button aria-pressed> switch works too, but it needs JavaScript to change state.
What does "Use CSS variables" change?
It moves the size, color, and timing values into custom properties like --toggle-width on the switch's class. You can then change one variable, for example inside a dark-mode rule, and the knob size and travel distance recalculate on their own.
Can I use several different toggle styles on one page?
Yes. Generate each style with its own class name, such as toggle-small and toggle-large, so the rules don't overlap. Switches that share a style can share one class.
Which browsers does it work in?
All current versions of Chrome, Edge, Firefox, and Safari. The disabled-cursor rule uses :has(), which older browsers skip without breaking anything else.
Is anything I enter sent to a server?
No. The preview and the code are generated in your browser, and nothing is uploaded or stored.