CSS Toggle Switch Generator
Generate a pure-CSS toggle switch — a real checkbox styled with :checked, no JavaScript. Set size, colors, radius and animation speed, pick a scoped class name, and copy accessible HTML + CSS.
Input
Style
Capped at half the height — leave it high for a pill, drop it to 0 for a square switch.
Colors
Ignored by the outlined style, where the knob takes the on/off color itself.
Behavior & markup
Automatically disabled for visitors who prefer reduced motion.
Every selector is scoped under this class, so it won't collide with your own styles.
Leave blank for a switch with no visible label.
Output
Your toggle switch will appear here.
The real generated component, isolated in a Shadow DOM — click it to see the animation.
Your toggle switch will appear here.
Inline-styled copy of the two states above — handy for a mockup. Not interactive.
Guides
What this tool does
The CSS Toggle Switch Generator builds an iOS-style toggle out of a real <input type="checkbox"> and nothing but CSS. Set the size, colors, corner radius and animation speed, and you get the HTML, the stylesheet and a live preview of both the off and on states.
There is no JavaScript in the output. The switch flips because of the :checked sibling selector, which means it works with the keyboard, submits with a form, and degrades to a plain checkbox on anything that can't style it.
How to use it
- Pick a Switch Style — see below for what each one changes.
- Set Width, Height and Border Radius. Leave the radius high for a pill, drop it toward 0 for a square switch.
- Choose the Off, On and Knob colors.
- Set the Animation duration, toggle the knob shadow, and give it a Class Name.
- Copy the HTML into your markup and the CSS into your stylesheet.
The three styles
- Track — the knob sits inside the track, inset by an eighth of the height. This is the classic iOS switch.
- Slim — the track is a thin bar and the knob is taller than it, overhanging above and below. This is the Material Design shape.
- Outlined — the track is transparent with a colored border, and the knob takes the on/off color itself. Good for minimal or dark-mode UIs.
Everything else — sizing, colors, radius, timing — applies to all three, so any of them can be pushed a long way from its default.
Is the generated switch accessible?
Yes, and this is where a generated switch usually falls down. The output keeps a genuine focusable checkbox (visually hidden, never display: none, which would remove it from the tab order), adds role="switch", draws a :focus-visible outline so keyboard users can see where they are, styles a :disabled state, and wraps the animation in a prefers-reduced-motion: reduce block that turns the transition off for visitors who ask for less motion.
Will the CSS conflict with my existing styles?
Every selector is scoped under the class name you choose, using a BEM-style __input / __track / __label naming. Nothing targets a bare element, so pasting it into an existing stylesheet won't reach anything else. If io-switch is already taken, type a different name and the whole block is renamed.
Why is the preview static?
The preview renders both states side by side with inline styles so you can compare them at a glance. A real :checked rule and a ::before knob can't live in an inline style attribute — the interactive version is the HTML + CSS you copy.
What if I need something other than a switch?
For a plain styled checkbox or radio, the HTML Checkbox Generator produces the markup. To fine-tune the shape, use the CSS Border Radius Generator, and for the knob's drop shadow the CSS Box Shadow Generator gives you far more control. Picking on/off colors that read well together is easier with the Color Mixer.