CSS Switch Generator — Toggle Switch Builder, Free
Build accessible toggle switches with pure CSS. Like iOS / Android. Custom colors, sizes, animations. Browser-only.
About CSS Switch Generator
Toggle switches are the iOS/Android style on/off control — a track with a thumb that slides between two positions. They're semantically a checkbox styled to look like a switch. The ZTools CSS Switch Generator builds the markup and CSS: pick a track width, height, colour for on/off states, thumb size, animation duration. Output is accessible (native input under the hood), keyboard-focusable, and works without JavaScript.
Use cases
- Settings toggles. "Enable notifications" — clearer affordance as a switch than a checkbox. Mobile users especially recognise the pattern.
- Dark mode toggle. A switch that moves left for light, right for dark. Pair with prefers-color-scheme detection.
- Filter toggles in admin UIs. "Show archived items" — quick on/off without a save button. Switches communicate immediate effect better than checkboxes.
How it works
- Pick dimensions. Track width × height (e.g. 44×24). Thumb size (typically height − 4 for padding). Border radius defaults to round (height/2).
- Pick colours. Off track, on track, thumb (typically white). Disabled state colours separately configurable.
- Configure motion. Slide duration (200-400 ms feels right). Easing curve (ease-in-out is the safe default).
- Copy HTML + CSS. Output: <label class="sw"><input type="checkbox"><span class="sw-track"><span class="sw-thumb"/></span></label>. CSS ~25 lines.
Examples
Input: 44×24 track, blue on, grey off, 250 ms slide
Output: CSS toggles --track-bg between #d1d5db (off) and #2563eb (on); transform: translateX(20px) on the thumb when :checked.
Input: Larger 60×32 with text labels inside ("ON" / "OFF")
Output: Track holds two pseudo-element labels positioned absolutely; opacity fades based on :checked.
Frequently asked questions
Switch vs checkbox — when to use which?
Switch: immediate on/off effect. Checkbox: requires a save action OR is part of a multi-selection. iOS HIG and Material Design both follow this rule.
Is this accessible?
Yes — uses a native checkbox with semantics intact. Add aria-label or wrap in a label so screen readers announce the purpose.
Should I add aria-pressed?
Only if you're building it with a <button> instead of a checkbox. With native checkbox, aria-checked is implicit.
Does it work without JavaScript?
Yes — pure CSS. Native checkbox drives state; CSS animates the thumb on :checked.
Privacy?
All generation in browser.
Pro tips
- Touch targets should be at least 44×24 (iOS) or 48×24 (Material) — anything smaller is hard to hit on a phone.
- Always pair with a label — never let a switch float without context.
- Animation duration around 200-300 ms feels responsive without feeling rushed. Anything <100ms feels instant (no feedback); >500ms feels sluggish.
- For dark mode, use CSS variables for both colours — same component, different palette.
Reviewed by Ahsan Mahmood · Last updated 2026-05-06 · Part of ZTools.
For the full,
formatted version of this page, please enable JavaScript and reload
https://ztools.zaions.com/css-switch-generator.