CSS Toggle Switch Generator

Live preview

Click the switch to toggle it.

.toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}
.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle .track {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 28px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.toggle .track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, background 0.25s ease;
}
.toggle input:checked + .track {
  background: #6366f1;
}
.toggle input:checked + .track::before {
  transform: translateX(24px);
  background: #ffffff;
}

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