CSS Toggle Switch Generator
A real, working toggle — pure CSS over a genuine checkbox, so keyboard and screen-reader behavior come free. Tune size, colors and speed; click the preview to feel it.
Settings
The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
Related generators & tools
- CSS Button GeneratorTypography & Buttons
- CSS Card GeneratorUI Components
- CSS Loader GeneratorAnimation & Motion
- CSS Transition GeneratorAnimation & Motion
- CSS Hover Effects GeneratorAnimation & Motion
How it works
The pattern: a visually hidden real <input type=checkbox> inside a label, with a styled sibling drawing the track and (via ::after) the knob. :checked + flips colors and slides the knob — state lives in the checkbox, so clicking, Space, forms and assistive tech all work without JavaScript.
The generated CSS includes a :focus-visible ring — a toggle without one is invisible to keyboard users. That line is not optional decoration.
Run the code — try it yourself
Wire the classic pattern: hide the checkbox, draw the track on the span, slide a ::after knob when :checked. The skeleton is ready.
Frequently asked questions
Why hide the checkbox with opacity, not display:none?
display:none removes it from keyboard focus; opacity keeps it interactive and screen-reader visible — the visuals are just delegated to the sibling.
Can I label the on/off states?
Yes — put text inside the track or beside the label; for icon-only toggles give the input an aria-label.
How is this different from a checkbox visually styled?
Same mechanism, different metaphor: switches imply immediate effect, checkboxes imply selection to be submitted. See the Pseudo-classes lesson for the full pattern family.
Keep going
A toggle that isn't a real checkbox is a lawsuit-shaped div. This pattern gives you the look and the semantics — the mechanism is in Pseudo-classes & Elements.
CSSmatic is a non-profit project, made by developers for developers.