CSS Switch Generator

Generate beautiful CSS toggle switches without JavaScript.

Runs 100% in your browser — your data never leaves this device

Width60px

Height34px

Border Radius34px

On Color

Off Color

Knob Color

Live Preview (click to toggle)

OFF

HTML

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

CSS

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

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  transition: 0.3s;
  border-radius: 32px;
}

input:checked + .slider {
  background-color: #4ade80;
}

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

input:focus + .slider {
  box-shadow: 0 0 1px #4ade80;
}

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is CSS Switch Generator?

CSS switches are toggle controls built entirely with CSS, requiring no JavaScript for the visual toggle effect. They use the checkbox hack to create interactive on/off states. Our generator creates customizable, accessible toggle switches with smooth animations.