Generatore di Interruttore CSS

Che cos'è questo strumento?

Un interruttore CSS è un checkbox stilizzato per apparire e comportarsi come un interruttore fisico on/off — una traccia a forma di pillola con un cursore circolare che scorre da un lato all'altro. Sotto il cofano rimane un vero input checkbox, ed è importante: mantiene il controllo accessibile da tastiera, utilizzabile con gli screen reader e compatibile con l'invio dei moduli, a differenza di un interruttore costruito solo con div cliccabili.

Questo strumento costruisce questo schema per te: un checkbox nascosto, una traccia che cambia colore in base a :checked, e un cursore che scorre tramite una trasformazione CSS. Regola cursori e selettori di colore, clicca sull'anteprima per testare l'animazione reale, e copia sia il CSS sia il markup HTML minimo da cui dipende.

Fonte: WAI-ARIA Authoring Practices, W3C — raccomanda un vero input checkbox come base accessibile per un controllo switch, motivo per cui l'output di questo generatore mantiene l'elemento input sottostante.

Perché usarlo?

• L'anteprima è un interruttore vero e cliccabile, non un'immagine statica, così puoi testare l'animazione esatta prima di usarla.
• Genera sia il CSS sia la struttura HTML accessibile (input checkbox + label) da cui dipende il CSS.
• Controllo completo su larghezza/altezza della traccia, colore da spento, colore da acceso, colore del cursore, arrotondamento degli angoli e velocità di transizione.
• Usa lo schema standard checkbox + selettore :checked, quindi l'interruttore resta navigabile da tastiera e funziona all'interno di moduli reali.
• Funziona interamente nel browser: nessuna delle impostazioni configurate viene caricata da nessuna parte.
• Gratuito, senza registrazione, funziona su dispositivi mobili.

Come si usa

1. Imposta larghezza e altezza per dimensionare la traccia — il cursore viene dimensionato automaticamente per adattarsi con un piccolo margine interno.
2. Scegli il colore dello stato spento (non selezionato) della traccia e il colore dello stato acceso quando attivato.
3. Scegli un colore del cursore: il bianco o un neutro chiaro offre solitamente il massimo contrasto rispetto alla traccia.
4. Imposta il raggio del bordo al 50% per un interruttore classico a forma di pillola, oppure abbassalo per un rettangolo leggermente arrotondato.
5. Regola la velocità di transizione per controllare quanto velocemente scorre il cursore e cambia colore la traccia tra gli stati.
6. Clicca sull'interruttore nell'anteprima per confermare che l'animazione sia corretta, poi copia il CSS e l'HTML nel tuo progetto.

Esempio

Input

Larghezza: 52px · Altezza: 28px · Colore spento: #cbd5e1 · Colore acceso: #ea580c · Raggio: 50% · Velocità: 200ms

Risultato

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

Il cuore dello schema: lo stato :checked del checkbox, combinato con il selettore di fratelli generico (~), guida sia il colore di sfondo della traccia sia la distanza di scorrimento del cursore.

Perché un checkbox invece di un div con un gestore di clic

È allettante costruire un interruttore con due elementi <div> e un po' di JavaScript che cambia una classe al clic, ma questo approccio di solito rompe la navigazione da tastiera, gli annunci degli screen reader e l'invio dei moduli — un vero checkbox gestisce tutti e tre gratuitamente. Lo schema generato da questo strumento mantiene l'<input type="checkbox"> come vero elemento interattivo (nascosto visivamente ma ancora focalizzabile), e usa CSS puro — senza alcun JavaScript — per definire lo stile di traccia e cursore in base allo stato nativo :checked del checkbox.

Stili di interruttore comuni

• Interruttore a pillola classico: raggio del bordo al 50%, dimensione moderata (48–56px di larghezza), un cambio di colore netto tra acceso/spento.
• Interruttore da pannello impostazioni: dimensione più piccola (36–44px di larghezza), colore spento tenue (grigio chiaro) contro uno stato acceso con il colore del brand.
• Interruttore leggermente arrotondato: raggio del bordo intorno al 20–30% invece di una pillola completa, per un look più rettangolare, tipo app.
• Interruttore rapido e scattante: velocità di transizione di 100–150ms trasmette immediatezza e reattività.
• Interruttore lento e ponderato: velocità di transizione di 300–400ms risulta più fluida e curata, utile per un singolo interruttore di impostazioni in evidenza.

Abbinamento con altri strumenti CSS

La traccia e il cursore generati usano già internamente border-radius, quindi se vuoi una variante squadrata o arrotondata diversamente da quanto offre il cursore, il Generatore di Border Radius ti permette di regolare ogni angolo in modo indipendente prima di incollare il valore. Il Generatore di Box Shadow è utile per aggiungere un'ombra sottile al cursore per maggiore profondità.

→ Generatore di raggio di bordo · Generatore di ombreggiatura dei riquadri

Domande frequenti