CSS Switch Generator

Create custom animated CSS-only toggle switches

CSS Switch Generator

Generate custom toggle switches with pure CSS.

Settings
Width: 48px
Height: 26px
Speed: 0.3s
Active Color
CSS
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #e5e7eb;
  border-radius: 26px;
  transition: 0.3s;
}
.switch .slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background-color: #6366f1; }
.switch input:checked + .slider::before { transform: translateX(22px); }

More browser-based utilities in this collection

View all CSS Styling & Layout Generators tools→