CSS Switch Generator

Generate pure CSS toggle switch styles with live preview. No JavaScript required.

Size

Shape

Transition speed

Presets

ON color

#22d3ee

OFF color

#d1d5db

Knob color

#ffffff

Live Preview

Dimensions: 52x28pxKnob: 20pxSpeed: 0.3sShape: pill

Left: OFF | Right: ON

HTML

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

CSS

/* CSS Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  inset: 0;
  background-color: #d1d5db;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 4px;
  top: 4px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s;
}

input:checked + .slider {
  background-color: #22d3ee;
}

input:checked + .slider::before {
  transform: translateX(24px);
}

.switch input:focus-visible + .slider {
  outline: 2px solid var(--color-primary, #3b82f6);
  outline-offset: 2px;
}

How CSS toggle switches work

A CSS switch uses a hidden checkbox input paired with a styled label. The :checked pseudo-class triggers background and transform changes. The knob is the ::before pseudo-element that slides via translateX. No JavaScript needed — accessibility is preserved because the real checkbox handles keyboard and screen reader interaction.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a toggle without pulling in a component library.
Getting a pure-CSS switch that works without JavaScript.
Customising size and colour to match an existing design.
Producing a starting point you then wire to real state.
Comparing transition timings before choosing one.

Frequently Asked Questions

Should a toggle switch be a checkbox?: Yes, in almost every case — a real `<input type="checkbox">` with `role="switch"` if the on/off framing matters. Building one from a `<div>` loses keyboard operation, the checked state and every assistive-technology affordance, and none of that comes back with ARIA alone.
What is the difference between a switch and a checkbox?: A switch takes effect immediately; a checkbox is usually part of a form that gets submitted. That is a genuine interaction difference — a switch with a Save button beside it is a checkbox wearing the wrong control, and it confuses people about whether the change applied.
How is the sliding animation built?: By transitioning `transform: translateX()` on the knob and `background-color` on the track, driven by the `:checked` state. Using `transform` rather than `left` keeps the animation on the compositor, which is what makes it smooth on a low-end phone.
Does colour alone communicate the state?: It should not — that fails WCAG 1.4.1, and a red-green switch is unreadable for a substantial minority. Position is the primary signal, and a label, an icon or a text state gives a second channel that does not depend on colour perception.
Should there be a disabled state?: If the control can be unavailable, yes — and `aria-disabled` is usually better than the `disabled` attribute, which removes the element from the tab order so a keyboard user never discovers it exists. Explaining WHY it is disabled matters more than the styling.

Common errors and gotchas

Hiding the underlying checkbox with `display: none`, which removes it from the keyboard tab order.
Omitting a visible focus style, which makes the control unusable without a mouse.
Using a div rather than a real input, which loses every built-in accessibility behaviour.
Not labelling the switch, so a screen reader announces a control with no purpose.
Ignoring reduced-motion preferences on the transition.