Generatore Switch CSS

Crea componenti toggle switch con CSS

Elaborazione nel BrowserI tuoi dati non lasciano mai il browser

Switch Style

Size & Shape

Width52px
Height28px
Thumb Size24px
Border Radius50px
Transition200ms

Colors

Off Background
On Background
Thumb Color
Border Color

Preview

CSS

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

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

.switch-track {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e7eb;
  border-radius: 50px;
  transition: background-color 200ms ease;
}

.switch-track::before {
  content: "";
  position: absolute;
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 200ms ease;
}

.switch input:checked + .switch-track {
  background-color: #3b82f6;
}

.switch input:checked + .switch-track::before {
  transform: translateX(24px);
}

.switch input:focus + .switch-track {
  box-shadow: 0 0 0 3px #3b82f633;
}

HTML

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

About Generatore Switch CSS

Crea componenti toggle switch con CSS

Use this free online generatori css tool to work faster without installing extra software. The interface is built for quick input, clear output, and straightforward results on desktop and mobile devices.

Processing

This tool runs in your browser whenever possible, which keeps your inputs private and reduces unnecessary round-trips to the server.