Why is the toggle built on a real checkbox instead of a div with a click handler?

A native gives you keyboard support (Tab and Space), form submission, and screen reader announcement of the checked state for free. The CSS just hides the default checkbox and styles the sibling to look like a switch, using the :checked pseudo-class to drive the on/off appearance.

How does the knob slide when the checkbox is checked?

The `.toggle input:checked + .track::before` rule translates the knob (the ::before pseudo-element) to the right by the track width minus the track height — that's the exact distance needed so the knob lands flush against the opposite edge.

Can I make the switch bigger without breaking the knob alignment?

Yes — use this generator's width and height sliders rather than editing the CSS by hand; it recalculates the knob size and travel distance to match automatically. If editing manually, keep knob size at height − 4px and travel distance at width − height.

Is this switch accessible?

Yes, as long as you keep the real in the markup (just visually hidden, not display: none removed from the accessibility tree) and wrap it with a or add an aria-label — screen readers will announce it as a checkbox with its checked state.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS TOGGLE SWITCH GENERATOR

Design a switch on a real checkbox, then copy the CSS and matching HTML.

Width: 52px

Height: 28px

Off color

On color

Knob color

CSS

.toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

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

.toggle .track {
  position: absolute;
  inset: 0;
  background: #4a4238;
  border-radius: 28px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.toggle input:checked + .track {
  background: #ff6a35;
}

.toggle .track::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 24px;
  height: 24px;
  background: #f2e9dc;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

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

HTML: <label class="toggle"><input type="checkbox" /><span class="track"></span></label>

How to build a CSS toggle switch

1
Click the preview switch to see the on/off states.
2
Adjust the width and height on the live preview.
3
Pick the off, on, and knob colors.
4
Copy the generated CSS and the matching HTML checkbox markup shown below it.

Questions

Why is the toggle built on a real checkbox instead of a div with a click handler?: A native <input type="checkbox"> gives you keyboard support (Tab and Space), form submission, and screen reader announcement of the checked state for free. The CSS just hides the default checkbox and styles the sibling <span> to look like a switch, using the :checked pseudo-class to drive the on/off appearance.
How does the knob slide when the checkbox is checked?: The `.toggle input:checked + .track::before` rule translates the knob (the ::before pseudo-element) to the right by the track width minus the track height — that's the exact distance needed so the knob lands flush against the opposite edge.
Can I make the switch bigger without breaking the knob alignment?: Yes — use this generator's width and height sliders rather than editing the CSS by hand; it recalculates the knob size and travel distance to match automatically. If editing manually, keep knob size at height − 4px and travel distance at width − height.
Is this switch accessible?: Yes, as long as you keep the real <input type="checkbox"> in the markup (just visually hidden, not display: none removed from the accessibility tree) and wrap it with a <label> or add an aria-label — screen readers will announce it as a checkbox with its checked state.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.