Design an on/off switch without JavaScript: choose the size, colors, shape, knob and animation, click the live preview to try it, and copy clean HTML and CSS built on a real checkbox, so it works with forms, keyboards and screen readers.
Last updated:
Presets
Click, tap or Tab + Space to try the switches.
Size & shape
Animation
Colors
HTML
CSS
Advertisement
Advertisement
How to use the CSS Toggle Switch Generator
Pick a preset such as iOS, Square or Labeled, or start from the default.
Adjust the size and shape: width, height, knob padding and roundness.
Choose colors for the off and on track, the knob and the inside text.
Tune the animation: duration, easing and an optional stretch while pressing.
Click the preview switches to test them, then copy the HTML and CSS into your page.
How the pure CSS toggle switch works
The switch is a normal <input type="checkbox"> wrapped in a <label>. Clicking anywhere on the label toggles the checkbox, and CSS reacts to its state:
Part
Role
input[type=checkbox]
Holds the on/off state; visually hidden but still focusable and submitted with forms
role="switch"
Tells screen readers to announce "switch, on/off" instead of "checkbox, checked"
.switch-track
The colored rail; input:checked + .switch-track changes its color
.switch-track::before
The knob; moved with transform: translateX(), which animates smoothly on the GPU
.switch-track::after
Optional ON/OFF text inside the track
:focus-visible
Draws a focus ring for keyboard users only
The knob travel distance is track width − knob size − 2 × padding, and the knob size is track height − 2 × padding. The generator computes these for you so the knob always lands exactly at the edge.
Accessibility checklist
Keep a visible text label, or at least an aria-label on the input when the label is hidden.
Make sure the on and off track colors differ enough from the page background (WCAG 1.4.11 asks for 3:1 contrast for UI components) and do not rely on color alone; the knob position also shows the state.
Toggle switches should act immediately. If a change needs saving, a checkbox is the clearer control.
The CSS includes prefers-reduced-motion, so the knob jumps instead of sliding for users who turn off animations.
Frequently asked questions
How do you make a toggle switch with only CSS?
Use a real checkbox inside a label, hide the checkbox visually (not with display: none, so it stays focusable), and style a sibling span as the track with a ::before pseudo-element as the knob. The selector input:checked + span changes the track color and moves the knob with transform: translateX(). Clicking the label toggles the checkbox, so no JavaScript is required.
Is a CSS toggle switch accessible?
Yes, if it is built on a native checkbox. The generated code adds role="switch" so screen readers announce on/off, keeps the input focusable for Tab and Space, shows a focus ring with :focus-visible, has a text label (or aria-label), and turns off the animation for users who prefer reduced motion.
How do I read the switch value in a form or with JavaScript?
It is a normal checkbox: give the input a name and value to submit it with a form, add checked for an on default, and read input.checked or listen for the change event in JavaScript.
Why not hide the checkbox with display: none?
display: none and visibility: hidden remove the input from the keyboard tab order and from the accessibility tree, so keyboard and screen reader users could not operate the switch. The generated CSS makes it transparent and 1px small instead.
Should I use a switch or a checkbox?
Use a switch for settings that take effect immediately, like turning notifications on. Use a checkbox when the choice is applied later with a submit button or when users choose several options in a list.
How do I make the switch bigger on mobile?
Change the width and height (and the knob padding) here, or wrap the values in a media query. Aim for a touch target of at least 44 by 24 pixels; the whole label, including the text, is clickable.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.