G4GAME/DevTools

CSS Toggle Switch Generator

Make an on/off switch that works with keyboards and screen readers because it's a real checkbox underneath. Style the track, knob and animation.

Last updated: · Runs 100% in your browser

// controls
56px
30px
0.2s
Live preview
Generated CSS
.switch {
  appearance: none;
  width: 56px;
  height: 30px;
  background: #3a3f3c;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

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

.switch:checked {
  background: #00ff66;
}

.switch:checked::before {
  transform: translateX(26px);
}

.switch:focus-visible {
  outline: 2px solid #00ff66;
  outline-offset: 3px;
}

// Example output

.switch {
  appearance: none;
  width: 56px;
  height: 30px;
  background: #3a3f3c;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

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

.switch:checked {
  background: #00ff66;
}

.switch:checked::before {
  transform: translateX(26px);
}

.switch:focus-visible {
  outline: 2px solid #00ff66;
  outline-offset: 3px;
}

// Features

  • ▸Built on input type=checkbox
  • ▸Track, knob and on/off colors
  • ▸Width, height and speed
  • ▸Focus-visible outline
  • ▸Click the preview to test

// How to use

  1. 01Adjust the controls on the left or pick a preset to start the CSS Toggle Switch Generator.
  2. 02Watch the live preview update instantly as you change each setting.
  3. 03Fine-tune the generated CSS by hand in the code panel if you like.
  4. 04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

CSS Checkbox Generator
Style custom checkboxes with CSS appearance: none — size, colors, radius and checkmark, fully accessible.
CSS Radio Button Generator
Create custom-styled radio buttons in pure CSS with adjustable size, colors and dot size.
CSS Button Generator
Design production-ready buttons with gradients, borders, hover effects and shadows, then copy the CSS.