Toolcroft

Color Tools

CSS Toggle Switch Generator - Custom On/Off Switch

Design a custom CSS toggle switch with live preview. Set track colors, thumb size, animation speed, and labels. Generates ready-to-use HTML and CSS with no JavaScript required.

Live preview

.toggle-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  position: relative;
  width: 52px;
  height: 28px;
  background: #cbd5e1;
  border-radius: 28px;
  transition: background 200ms ease;
}

.toggle-input:checked + .toggle-track {
  background: #3b82f6;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 50px;
  transition: transform 200ms ease;
}

.toggle-input:checked + .toggle-track::after {
  transform: translateX(24px);
}

How CSS toggle switches work

A CSS-only toggle switch is built on a hidden <input type="checkbox">. The visible track and thumb are styled spans. When the checkbox is checked, the CSS :checked pseudo-class matches, and the adjacent-sibling combinator (+) targets the track to change its background and slide the thumb via transform: translateX().

Animation

The slide animation uses CSS transition on the track's background and the thumb's transform. Adjust the animation duration slider to taste - 150–300 ms feels most natural for interactive elements.

Accessibility requirements

A visually styled toggle switch must still be accessible to keyboard and screen reader users:

  • Using a checkbox: wrap a hidden <input type="checkbox"> with a visible <label>. The label provides the accessible name. Screen readers will announce it as a checkbox - acceptable but not ideal.
  • Using a button with role="switch": a <button role="switch" aria-checked="true|false"> provides richer semantics. Screen readers announce it as a switch (e.g., "Dark mode, on").
  • Ensure the toggle is keyboard-focusable and operable with Space.
  • Focus outline must be clearly visible - don't remove :focus-visible styles.

Color and state communication

A toggle that relies solely on green (on) vs. grey (off) color fails WCAG 1.4.1 (Use of Color), which requires that color is not the only visual means of conveying state. Consider:

  • Adding a text label ("On" / "Off") inside or beside the toggle.
  • Using an icon (checkmark or X) inside the thumb.
  • Changing the thumb position (left vs. right) - this alone provides a non-color indicator.

Using the generated code

Copy the HTML and CSS from the output panels. The minimal integration pattern:

<label for="my-toggle" class="toggle-label">
  Enable notifications
  <input type="checkbox" id="my-toggle" class="toggle-input" />
  <span class="toggle-track"><span class="toggle-thumb"></span></span>
</label>

The for/id connection between label and input ensures clicking anywhere on the label text also toggles the switch. Paste the generated CSS into your stylesheet or a <style> tag.