CodeKitHubWhat Is This Tool?
A CSS toggle switch is a checkbox styled to look and behave like a physical on/off switch — a pill-shaped track with a circular thumb that slides from one side to the other. Under the hood it's still a real checkbox input, which matters: it keeps the control keyboard-accessible and usable with screen readers and form submissions, unlike a switch built purely from clickable divs.
This tool builds that pattern for you: a hidden checkbox, a track that changes color based on :checked, and a thumb that slides using a CSS transform. Adjust the sliders and color pickers, click the preview to test the actual toggle animation, and copy both the CSS and the minimal HTML markup it depends on.
Source: WAI-ARIA Authoring Practices, W3C — recommends a real checkbox input as the accessible base for a switch control, which is why this generator's output keeps the underlying input element.
Why Use It?
- The preview is a real, clickable toggle — not a static image — so you can test the exact animation before using it.
- Outputs both the CSS and the accessible HTML structure (checkbox input + label) the CSS depends on.
- Full control over track width/height, off-state color, on-state color, thumb color, corner rounding and transition speed.
- Uses the standard checkbox + :checked selector pattern, so the toggle stays keyboard-navigable and works inside real forms.
- Runs entirely in your browser — nothing you configure is uploaded anywhere.
- Free, no signup, works on mobile.
How to Use
- Set width and height to size the track — the thumb is automatically sized to fit inside with a small padding.
- Pick the off-state color for the track's default (unchecked) look, and the on-state color for when it's toggled on.
- Choose a thumb color — white or a light neutral usually gives the strongest contrast against the track.
- Set border radius to 50% for a classic pill-shaped switch, or lower it for a slightly rounded rectangle instead.
- Adjust transition speed to control how fast the thumb slides and the track color fades between states.
- Click the preview toggle to confirm the animation looks right, then copy the CSS and HTML into your project.
Example
Input
Width: 52px · Height: 28px · Off color: #cbd5e1 · On color: #ea580c · Radius: 50% · Speed: 200msOutput
.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }The core of the pattern: the checkbox's :checked state, combined with the general sibling selector (~), drives both the track's background color and the thumb's slide distance.
Why a checkbox instead of a div with a click handler
It's tempting to build a toggle out of two <div> elements and a bit of JavaScript that swaps a class on click, but that approach usually breaks keyboard navigation, screen reader announcements, and form submission — a real checkbox handles all three for free. The pattern this tool generates keeps the <input type="checkbox"> as the actual interactive element (visually hidden but still focusable), and uses pure CSS — no JavaScript at all — to style the track and thumb based on the checkbox's native :checked state.
Common switch styles
- Classic pill switch: border radius at 50%, moderate size (48–56px wide), a clear color change between on/off.
- Settings-panel switch: smaller size (36–44px wide), muted off-color (light gray) against a brand-colored on-state.
- Slightly rounded switch: border radius around 20–30% instead of a full pill, for a more rectangular, app-like look.
- Fast, snappy switch: transition speed at 100–150ms feels immediate and responsive.
- Slow, deliberate switch: transition speed at 300–400ms reads as smoother and more polished, useful for a single prominent settings toggle.
Pairing with other CSS tools
The generated track and thumb already use border-radius under the hood, so if you want a squared-off or differently-rounded variant beyond what the slider offers, the Border Radius Generator lets you fine-tune each corner independently before pasting the value in. The Box Shadow Generator is useful for adding a subtle shadow to the thumb for extra depth.
Frequently Asked Questions
Why does the output include HTML, not just CSS?
A toggle switch isn't purely visual — it depends on a real <input type="checkbox"> wrapped in a <label>, plus the track and thumb elements the CSS targets. Without that exact structure, the :checked-based selectors in the generated CSS won't have anything to attach to, so both pieces are copied together.
Is this toggle accessible?
Yes — because the interactive element is a real checkbox (just visually hidden with a technique that keeps it in the accessibility tree, not display:none), it remains focusable with Tab, toggleable with Space or Enter, and correctly announced by screen readers as a checkbox in its current checked/unchecked state.
Can I use this inside an actual HTML form?
Yes. Since the underlying element is a standard checkbox input, you can give it a name and value attribute and it will submit like any other checkbox — checked switches send their value, unchecked ones are omitted, exactly like a normal checkbox.
Why does the thumb move using transform instead of changing its left position?
Animating transform: translateX() is handled by the browser's compositor and stays smooth even on lower-end devices, whereas animating left triggers layout recalculation on every frame. The generated CSS always uses transform for the sliding motion for this reason.
What does the border radius slider actually control?
It scales both the track's corner rounding and the thumb's corner rounding together, proportionally to the track's height. At 50% you get a fully rounded pill with a circular thumb; lower values keep the shape more rectangular for a squarer, app-style switch.