Générateur d'Interrupteur CSS

Ajustez les contrôles pour concevoir un interrupteur (toggle switch), cliquez sur l'aperçu pour voir l'animation, puis copiez le HTML et le CSS prêts à l'emploi. Réglez la largeur, la hauteur, les couleurs de piste éteinte/allumée, la couleur du curseur, l'arrondi des coins et la vitesse de transition — le résultat est un interrupteur accessible basé sur une checkbox standard, pas une simple forme décorative.

En quoi consiste cet outil ?

Un interrupteur CSS est une checkbox stylisée pour ressembler et se comporter comme un interrupteur physique marche/arrêt — une piste en forme de pilule avec un curseur circulaire qui glisse d'un côté à l'autre. En dessous, il s'agit toujours d'un vrai input checkbox, ce qui compte : cela garde le contrôle accessible au clavier, utilisable avec les lecteurs d'écran et compatible avec l'envoi de formulaires, contrairement à un interrupteur construit uniquement avec des divs cliquables.

Cet outil construit ce schéma pour vous : une checkbox cachée, une piste qui change de couleur selon :checked, et un curseur qui glisse via une transformation CSS. Ajustez les curseurs et sélecteurs de couleur, cliquez sur l'aperçu pour tester l'animation réelle, et copiez à la fois le CSS et le balisage HTML minimal dont il dépend.

Source : WAI-ARIA Authoring Practices, W3C — recommande un véritable input checkbox comme base accessible pour un contrôle de type switch, c'est pourquoi le résultat de ce générateur conserve l'élément input sous-jacent.

Pourquoi l'utiliser ?

L'aperçu est un véritable interrupteur cliquable — pas une image statique — vous pouvez donc tester l'animation exacte avant de l'utiliser.
Génère à la fois le CSS et la structure HTML accessible (input checkbox + label) dont dépend le CSS.
Contrôle complet de la largeur/hauteur de la piste, de la couleur éteinte, de la couleur allumée, de la couleur du curseur, de l'arrondi des coins et de la vitesse de transition.
Utilise le schéma standard checkbox + sélecteur :checked, donc l'interrupteur reste navigable au clavier et fonctionne dans de vrais formulaires.
Fonctionne entièrement dans votre navigateur — rien de ce que vous configurez n'est envoyé où que ce soit.
Gratuit, sans inscription, fonctionne sur mobile.

Mode d'emploi

Définissez la largeur et la hauteur pour dimensionner la piste — le curseur est automatiquement dimensionné pour s'y insérer avec une petite marge.
Choisissez la couleur de l'état éteint (non coché) de la piste, et la couleur de l'état allumé une fois activé.
Choisissez une couleur de curseur — le blanc ou un neutre clair offre généralement le meilleur contraste avec la piste.
Réglez le rayon de bordure à 50 % pour un interrupteur classique en forme de pilule, ou baissez-le pour un rectangle légèrement arrondi.
Ajustez la vitesse de transition pour contrôler la rapidité du glissement du curseur et du changement de couleur de la piste entre les états.
Cliquez sur l'interrupteur de l'aperçu pour confirmer que l'animation vous convient, puis copiez le CSS et le HTML dans votre projet.

Exemple

Entrée

Largeur : 52px · Hauteur : 28px · Couleur éteinte : #cbd5e1 · Couleur allumée : #ea580c · Rayon : 50 % · Vitesse : 200ms

Résultat

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

Le cœur du schéma : l'état :checked de la checkbox, combiné au sélecteur de frère général (~), pilote à la fois la couleur de fond de la piste et la distance de glissement du curseur.

Pourquoi une checkbox plutôt qu'un div avec un gestionnaire de clic

Il est tentant de construire un interrupteur avec deux éléments <div> et un peu de JavaScript qui bascule une classe au clic, mais cette approche casse généralement la navigation au clavier, les annonces des lecteurs d'écran et l'envoi de formulaires — une vraie checkbox gère les trois gratuitement. Le schéma généré par cet outil conserve l'<input type="checkbox"> comme véritable élément interactif (visuellement caché mais toujours focalisable), et utilise du CSS pur — sans aucun JavaScript — pour styliser la piste et le curseur selon l'état natif :checked de la checkbox.

Styles d'interrupteur courants

Interrupteur pilule classique : rayon de bordure à 50 %, taille modérée (48–56px de large), un changement de couleur net entre allumé/éteint.
Interrupteur de panneau de réglages : taille plus petite (36–44px de large), couleur éteinte discrète (gris clair) contre un état allumé aux couleurs de la marque.
Interrupteur légèrement arrondi : rayon de bordure autour de 20–30 % au lieu d'une pilule complète, pour un look plus rectangulaire, façon application.
Interrupteur rapide et vif : vitesse de transition de 100–150ms donne une sensation immédiate et réactive.
Interrupteur lent et posé : vitesse de transition de 300–400ms paraît plus fluide et soignée, utile pour un seul interrupteur de réglage important.

À associer avec d'autres outils CSS

La piste et le curseur générés utilisent déjà border-radius en interne, donc si vous voulez une variante carrée ou différemment arrondie au-delà de ce que propose le curseur, le Générateur de Border Radius vous permet d'ajuster chaque coin indépendamment avant de coller la valeur. Le Générateur de Box Shadow est utile pour ajouter une ombre subtile au curseur pour plus de profondeur.

→ Générateur de Border Radius · Générateur de Box Shadow

Foire aux questions

Pourquoi le résultat inclut-il du HTML, pas seulement du CSS ?

Un interrupteur n'est pas purement visuel — il dépend d'un véritable <input type="checkbox"> enveloppé dans un <label>, plus les éléments de piste et de curseur ciblés par le CSS. Sans cette structure exacte, les sélecteurs basés sur :checked du CSS généré n'auraient rien à cibler, c'est pourquoi les deux éléments sont copiés ensemble.

Cet interrupteur est-il accessible ?

Oui — puisque l'élément interactif est une véritable checkbox (seulement cachée visuellement avec une technique qui la maintient dans l'arbre d'accessibilité, pas avec display:none), elle reste focalisable avec Tab, activable avec Espace ou Entrée, et correctement annoncée par les lecteurs d'écran comme une checkbox dans son état coché/décoché actuel.

Puis-je l'utiliser dans un vrai formulaire HTML ?

Oui. Puisque l'élément sous-jacent est un input checkbox standard, vous pouvez lui donner un attribut name et value et il s'enverra comme n'importe quelle autre checkbox — les interrupteurs cochés envoient leur valeur, les non cochés sont omis, exactement comme une checkbox normale.

Pourquoi le curseur se déplace-t-il avec transform plutôt qu'en changeant sa position left ?

Animer transform: translateX() est géré par le compositeur du navigateur et reste fluide même sur des appareils modestes, alors qu'animer left déclenche un recalcul de la mise en page à chaque image. C'est pourquoi le CSS généré utilise toujours transform pour le mouvement de glissement.

Que contrôle exactement le curseur de rayon de bordure ?

Il met à l'échelle à la fois l'arrondi des coins de la piste et celui du curseur, proportionnellement à la hauteur de la piste. À 50 %, vous obtenez une pilule totalement arrondie avec un curseur circulaire ; des valeurs plus basses gardent une forme plus rectangulaire pour un interrupteur plus carré, façon application.