CSS Switch Generator

Wat is deze tool?

Een CSS toggle switch is een checkbox die zo gestyled is dat hij eruitziet en zich gedraagt als een fysieke aan/uit-schakelaar — een pilvormige track met een ronde duim die van de ene kant naar de andere schuift. Onder de motorkap is het nog steeds een echte checkbox-input, en dat is belangrijk: het houdt de bediening toetsenbord-toegankelijk en bruikbaar met schermlezers en formulierverzendingen, in tegenstelling tot een switch die puur uit klikbare divs is opgebouwd.

Deze tool bouwt dat patroon voor je: een verborgen checkbox, een track die van kleur verandert op basis van :checked, en een duim die verschuift met een CSS-transform. Pas de schuifregelaars en kleurkiezers aan, klik op de preview om de daadwerkelijke toggle-animatie te testen, en kopieer zowel de CSS als de minimale HTML-markup waar deze van afhangt.

Bron: WAI-ARIA Authoring Practices, W3C — beveelt een echte checkbox-input aan als toegankelijke basis voor een switch-bediening, en daarom behoudt de output van deze generator het onderliggende input-element.

Waarom gebruiken?

• De preview is een echte, klikbare toggle — geen statische afbeelding — zodat je de exacte animatie kunt testen voordat je hem gebruikt.
• Levert zowel de CSS als de toegankelijke HTML-structuur (checkbox-input + label) waar de CSS van afhangt.
• Volledige controle over trackbreedte/-hoogte, uitstand-kleur, aanstand-kleur, duimkleur, hoekafronding en overgangssnelheid.
• Gebruikt het standaard checkbox + :checked selectorpatroon, zodat de toggle toetsenbord-navigeerbaar blijft en werkt binnen echte formulieren.
• Draait volledig in je browser — niets van wat je configureert wordt ergens geüpload.
• Gratis, geen aanmelding, werkt op mobiel.

Hoe te gebruiken

1. Stel breedte en hoogte in om de track te dimensioneren — de duim wordt automatisch zo gedimensioneerd dat hij met een kleine padding past.
2. Kies de uitstand-kleur voor de standaardweergave (unchecked) van de track, en de aanstand-kleur voor wanneer hij is ingeschakeld.
3. Kies een duimkleur — wit of een lichte neutrale tint geeft meestal het sterkste contrast met de track.
4. Stel de hoekradius in op 50% voor een klassieke pilvormige switch, of verlaag deze voor een licht afgeronde rechthoek.
5. Pas de overgangssnelheid aan om te bepalen hoe snel de duim schuift en de trackkleur vervaagt tussen statussen.
6. Klik op de preview-toggle om te bevestigen dat de animatie klopt, kopieer dan de CSS en HTML naar je project.

Voorbeeld

Invoer

Breedte: 52px · Hoogte: 28px · Uitkleur: #cbd5e1 · Aankleur: #ea580c · Radius: 50% · Snelheid: 200ms

Uitvoer

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

De kern van het patroon: de :checked-status van de checkbox, gecombineerd met de algemene sibling-selector (~), stuurt zowel de achtergrondkleur van de track als de schuifafstand van de duim aan.

Waarom een checkbox in plaats van een div met een klik-handler

Het is verleidelijk om een toggle te bouwen uit twee <div>-elementen en wat JavaScript dat bij een klik een class wisselt, maar die aanpak breekt meestal toetsenbordnavigatie, schermlezer-aankondigingen en formulierverzending — een echte checkbox regelt dat alledrie gratis. Het patroon dat deze tool genereert houdt de <input type="checkbox"> als het daadwerkelijke interactieve element (visueel verborgen maar nog steeds focusbaar), en gebruikt pure CSS — helemaal geen JavaScript — om de track en duim te stylen op basis van de native :checked-status van de checkbox.

Veelvoorkomende switch-stijlen

• Klassieke pil-switch: hoekradius op 50%, gematigde grootte (48–56px breed), een duidelijke kleurverandering tussen aan/uit.
• Instellingenpaneel-switch: kleinere maat (36–44px breed), gedempte uitkleur (lichtgrijs) tegen een merkkleurige aanstand.
• Licht afgeronde switch: hoekradius rond 20–30% in plaats van een volledige pil, voor een meer rechthoekige, app-achtige look.
• Snelle, pittige switch: overgangssnelheid van 100–150ms voelt direct en responsief aan.
• Langzame, weloverwogen switch: overgangssnelheid van 300–400ms leest soepeler en gepolijster, handig voor een enkele prominente instellingen-toggle.

Combineren met andere CSS-tools

De gegenereerde track en duim gebruiken al border-radius onder de motorkap, dus als je een vierkante of anders afgeronde variant wilt buiten wat de schuifregelaar biedt, kun je met de Border Radius Generator elke hoek afzonderlijk verfijnen voordat je de waarde plakt. De Box Shadow Generator is handig om een subtiele schaduw aan de duim toe te voegen voor extra diepte.

→ Border Radius Generator · Box Shadow Generator

Veelgestelde vragen