MakerBox

CSS Toggle Switch Generator

Design a CSS toggle switch in seven designs — slider, iOS, Material, line, dot, inset, text labels — with size, color and transition controls. Free, no upload

Live preview — click a switch to toggle

Track (off)
Track (on)
Knob
CSS
.toggle-switch {
  display: inline-flex;
  position: relative;
  width: 56px;
  height: 30px;
  cursor: pointer;
}
.toggle-switch__input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
}
.toggle-switch__track {
  position: absolute;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: 15px;
  transition: background-color 0.3s ease;
}
.toggle-switch__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}
.toggle-switch__input:checked + .toggle-switch__track {
  background-color: #22c55e;
}
.toggle-switch__input:checked + .toggle-switch__track .toggle-switch__knob {
  transform: translateX(26px);
}
.toggle-switch__input:focus-visible + .toggle-switch__track {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}
HTML
<label class="toggle-switch">
  <input type="checkbox" class="toggle-switch__input" role="switch" />
  <span class="toggle-switch__track">
    <span class="toggle-switch__knob"></span>
  </span>
</label>

Paste the CSS into your stylesheet and drop the HTML wherever you need a switch. Copy code gives you both in one block, for a CodePen or a single-file demo.

🔒 Runs in your browser — nothing is uploaded.

Design a pure-CSS toggle switch

Pick one of seven designs — Slider, iOS, Material, Line, Dot, Inset or Text labels — then set the width and height, the off-track, on-track and knob colors, a rounded pill or squared shape, and the slide duration. Text labels draws words inside the switch, so it adds an On label, an Off label and a label color. The live preview updates as you drag each control, and the generated code is a checkbox-plus-label switch that needs no JavaScript — the :checked state slides the knob and swaps the track color with a CSS transition.

Copy the HTML and CSS

Paste the CSS into your stylesheet and drop the small HTML snippet wherever you need a switch. Because it is a real <input type="checkbox"> with role="switch", it is keyboard-accessible, works in forms, and needs no external library.

Frequently asked questions

Do I need JavaScript for this toggle switch?

No. The switch is a checkbox and a label styled with CSS. The :checked pseudo-class slides the knob and changes the track color, so it works with zero JavaScript.

Is the switch accessible?

Yes. It is a native input of type checkbox with role="switch", so it is focusable, toggles with the keyboard, and integrates with forms and screen readers.

How do I change the on and off colors?

Use the Track (off), Track (on) and Knob color pickers, or type any CSS color. The off color shows when the switch is unchecked and the on color appears when it is toggled on. Choosing the Text labels design adds an On label, an Off label and a Label color as well.