CSS-Schalter-Generator

Stelle mit den Reglern einen Toggle-Switch zusammen, klicke auf die Live-Vorschau, um die Animation zu sehen, und kopiere anschließend das fertige HTML und CSS. Lege Breite, Höhe, Track-Farben für Aus/Ein, Thumb-Farbe, Eckenrundung und Übergangsgeschwindigkeit fest — das Ergebnis ist ein barrierefreier, checkbox-basierter Schalter nach Standardmuster, keine rein dekorative Form.

Was ist dieses Tool?

Ein CSS-Toggle-Switch ist eine Checkbox, die so gestaltet ist, dass sie wie ein physischer Ein/Aus-Schalter aussieht und sich auch so verhält — ein pillenförmiger Track mit einem runden Thumb, der von einer Seite zur anderen gleitet. Im Hintergrund bleibt es ein echtes Checkbox-Input, und das ist entscheidend: Es hält das Element per Tastatur bedienbar, für Screenreader nutzbar und formular-tauglich — anders als ein Schalter, der rein aus klickbaren Divs gebaut ist.

Dieses Tool baut dieses Muster für dich: eine versteckte Checkbox, ein Track, der seine Farbe abhängig von :checked ändert, und ein Thumb, der per CSS-Transform gleitet. Passe Regler und Farbwähler an, klicke auf die Vorschau, um die tatsächliche Umschalt-Animation zu testen, und kopiere sowohl das CSS als auch das minimale HTML-Markup, von dem es abhängt.

Quelle: WAI-ARIA Authoring Practices, W3C — empfiehlt ein echtes Checkbox-Input als barrierefreie Grundlage für ein Switch-Element, weshalb die Ausgabe dieses Generators das zugrunde liegende Input-Element beibehält.

Warum sollte man es nutzen?

Die Vorschau ist ein echter, klickbarer Schalter — kein statisches Bild — sodass du die genaue Animation testen kannst, bevor du sie einsetzt.
Erzeugt sowohl das CSS als auch die barrierefreie HTML-Struktur (Checkbox-Input + Label), auf der das CSS aufbaut.
Volle Kontrolle über Track-Breite/-Höhe, Aus-Zustand-Farbe, Ein-Zustand-Farbe, Thumb-Farbe, Eckenrundung und Übergangsgeschwindigkeit.
Nutzt das Standardmuster Checkbox + :checked-Selektor, sodass der Schalter per Tastatur navigierbar bleibt und in echten Formularen funktioniert.
Läuft komplett in deinem Browser — nichts, was du einstellst, wird irgendwohin hochgeladen.
Kostenlos, keine Anmeldung, funktioniert auf dem Handy.

Anleitung

Lege Breite und Höhe fest, um den Track zu dimensionieren — der Thumb wird automatisch mit etwas Innenabstand passend dimensioniert.
Wähle die Farbe für den Aus-Zustand (nicht ausgewählt) des Tracks sowie die Farbe für den Ein-Zustand.
Wähle eine Thumb-Farbe — Weiß oder ein helles Neutral bietet meist den stärksten Kontrast zum Track.
Setze den Randradius auf 50 % für einen klassischen pillenförmigen Schalter, oder verringere ihn für ein leicht abgerundetes Rechteck.
Passe die Übergangsgeschwindigkeit an, um zu steuern, wie schnell der Thumb gleitet und die Track-Farbe zwischen den Zuständen wechselt.
Klicke in der Vorschau auf den Schalter, um die Animation zu prüfen, und kopiere dann CSS und HTML in dein Projekt.

Beispiel

Eingabe

Breite: 52px · Höhe: 28px · Aus-Farbe: #cbd5e1 · Ein-Farbe: #ea580c · Radius: 50 % · Geschwindigkeit: 200ms

Ausgabe

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

Der Kern des Musters: Der :checked-Zustand der Checkbox steuert zusammen mit dem allgemeinen Geschwister-Selektor (~) sowohl die Hintergrundfarbe des Tracks als auch die Gleitstrecke des Thumbs.

Warum eine Checkbox statt eines Divs mit Klick-Handler

Es ist verlockend, einen Schalter aus zwei <div>-Elementen und etwas JavaScript zu bauen, das beim Klick eine Klasse umschaltet, aber dieser Ansatz zerstört meist Tastaturnavigation, Screenreader-Ansagen und Formular-Übermittlung — eine echte Checkbox liefert alle drei kostenlos mit. Das von diesem Tool erzeugte Muster behält das <input type="checkbox"> als tatsächliches interaktives Element (visuell versteckt, aber weiterhin fokussierbar) und nutzt reines CSS — ganz ohne JavaScript —, um Track und Thumb basierend auf dem nativen :checked-Zustand der Checkbox zu stylen.

Gängige Schalter-Stile

Klassischer Pillen-Schalter: Randradius bei 50 %, moderate Größe (48–56px Breite), deutlicher Farbwechsel zwischen Ein/Aus.
Schalter im Einstellungs-Panel-Stil: kleinere Größe (36–44px Breite), gedeckte Aus-Farbe (Hellgrau) gegenüber einem markenfarbigen Ein-Zustand.
Leicht abgerundeter Schalter: Randradius um 20–30 % statt einer vollen Pille, für einen rechteckigeren, App-artigen Look.
Schneller, knackiger Schalter: Übergangsgeschwindigkeit von 100–150ms wirkt unmittelbar und reaktionsschnell.
Langsamer, bedachter Schalter: Übergangsgeschwindigkeit von 300–400ms wirkt weicher und hochwertiger, nützlich für einen einzelnen, prominenten Einstellungsschalter.

Kombination mit anderen CSS-Tools

Track und Thumb nutzen bereits intern border-radius. Wenn du eine eckigere oder anders gerundete Variante über das hinaus möchtest, was der Regler bietet, kannst du mit dem Border-Radius-Generator jede Ecke einzeln feinjustieren, bevor du den Wert einfügst. Der Box-Shadow-Generator eignet sich, um dem Thumb einen dezenten Schatten für mehr Tiefe hinzuzufügen.

→ Border-Radius-Generator · Box-Shadow-Generator

Häufig gestellte Fragen

Warum enthält die Ausgabe HTML und nicht nur CSS?

Ein Toggle-Switch ist nicht rein visuell — er hängt von einem echten <input type="checkbox"> ab, das in ein <label> eingebettet ist, plus den Track- und Thumb-Elementen, auf die das CSS zielt. Ohne genau diese Struktur hätten die :checked-basierten Selektoren im generierten CSS nichts, an das sie anknüpfen könnten, daher werden beide Teile zusammen kopiert.

Ist dieser Schalter barrierefrei?

Ja — da das interaktive Element eine echte Checkbox ist (nur visuell versteckt mit einer Technik, die sie im Accessibility-Baum belässt, nicht mit display:none), bleibt sie mit Tab fokussierbar, mit Leertaste oder Enter umschaltbar und wird von Screenreadern korrekt als Checkbox in ihrem aktuellen an/aus-Zustand angesagt.

Kann ich das in einem echten HTML-Formular verwenden?

Ja. Da das zugrunde liegende Element ein Standard-Checkbox-Input ist, kannst du ihm name- und value-Attribute geben, und es wird wie jede andere Checkbox übermittelt — aktivierte Schalter senden ihren Wert, deaktivierte werden weggelassen, genau wie bei einer normalen Checkbox.

Warum bewegt sich der Thumb per transform statt über eine geänderte left-Position?

Das Animieren von transform: translateX() übernimmt der Compositor des Browsers und bleibt auch auf schwächeren Geräten flüssig, während das Animieren von left in jedem Frame eine Layout-Neuberechnung auslöst. Aus diesem Grund verwendet das generierte CSS für die Gleitbewegung immer transform.

Was steuert der Randradius-Regler genau?

Er skaliert sowohl die Eckenrundung des Tracks als auch die des Thumbs gemeinsam, proportional zur Höhe des Tracks. Bei 50 % erhältst du eine vollständig gerundete Pille mit rundem Thumb; niedrigere Werte halten die Form eher rechteckig für einen eckigeren, App-artigen Schalter.