CSS Switch Generator

input[type="checkbox"].switch {
  appearance: none;
  width: 50px;
  height: 25px;
  background: #ccc;
  outline: none;
  cursor: pointer;
  border-radius: 25px;
  position: relative;
  transition: 0.3s;
}

input[type="checkbox"].switch:checked {
  background: #667eea;
}

input[type="checkbox"].switch:before {
  content: '';
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: white;
  top: 1px;
  left: 1px;
  transition: 0.3s;
}

input[type="checkbox"].switch:checked:before {
  left: 26px;
}