Generator przełącznika CSS

Dostosuj ustawienia, aby zaprojektować przełącznik (toggle switch), kliknij podgląd na żywo, aby zobaczyć animację, a następnie skopiuj gotowy do użycia kod HTML i CSS. Ustaw szerokość, wysokość, kolory toru dla stanu wyłączonego/włączonego, kolor suwaka, zaokrąglenie rogów i szybkość przejścia — wynikiem jest standardowy, dostępny przełącznik oparty na checkboxie, a nie tylko dekoracyjny kształt.

Czym jest to narzędzie?

Przełącznik CSS to checkbox ostylowany tak, aby wyglądał i zachowywał się jak fizyczny przełącznik wł/wył — tor w kształcie pigułki z okrągłym suwakiem przesuwającym się z jednej strony na drugą. Pod spodem to nadal prawdziwy input typu checkbox, co ma znaczenie: zachowuje dostępność z klawiatury, działa z czytnikami ekranu i poprawnie uczestniczy w wysyłaniu formularzy — w przeciwieństwie do przełącznika zbudowanego wyłącznie z klikalnych divów.

To narzędzie buduje ten wzorzec za Ciebie: ukryty checkbox, tor zmieniający kolor w zależności od :checked oraz suwak przesuwający się za pomocą transformacji CSS. Dostosuj suwaki i selektory kolorów, kliknij podgląd, aby przetestować rzeczywistą animację przełączania, a następnie skopiuj zarówno CSS, jak i minimalny znacznik HTML, od którego zależy.

Źródło: WAI-ARIA Authoring Practices, W3C — zaleca prawdziwy input typu checkbox jako dostępną podstawę dla kontrolki typu switch, dlatego wynik tego generatora zachowuje bazowy element input.

Dlaczego warto go używać?

Podgląd to prawdziwy, klikalny przełącznik — nie statyczny obraz — dzięki czemu możesz przetestować dokładną animację przed jej użyciem.
Generuje zarówno CSS, jak i dostępną strukturę HTML (input checkbox + label), od której CSS zależy.
Pełna kontrola nad szerokością/wysokością toru, kolorem stanu wyłączonego, kolorem stanu włączonego, kolorem suwaka, zaokrągleniem rogów i szybkością przejścia.
Wykorzystuje standardowy wzorzec checkbox + selektor :checked, więc przełącznik pozostaje nawigowalny z klawiatury i działa wewnątrz prawdziwych formularzy.
Działa całkowicie w przeglądarce — żadne wprowadzone przez Ciebie ustawienia nie są nigdzie przesyłane.
Bezpłatne, bez rejestracji, działa na urządzeniach mobilnych.

Jak używać

Ustaw szerokość i wysokość, aby określić rozmiar toru — suwak jest automatycznie dopasowywany z niewielkim wewnętrznym marginesem.
Wybierz kolor toru dla stanu wyłączonego (niezaznaczonego) oraz kolor dla stanu włączonego po aktywacji.
Wybierz kolor suwaka — biel lub jasny neutralny kolor zwykle daje najsilniejszy kontrast względem toru.
Ustaw promień obramowania na 50%, aby uzyskać klasyczny przełącznik w kształcie pigułki, lub zmniejsz go dla lekko zaokrąglonego prostokąta.
Dostosuj szybkość przejścia, aby kontrolować, jak szybko suwak się przesuwa, a kolor toru zmienia się między stanami.
Kliknij przełącznik w podglądzie, aby potwierdzić, że animacja wygląda dobrze, a następnie skopiuj CSS i HTML do swojego projektu.

Przykład

Wejście

Szerokość: 52px · Wysokość: 28px · Kolor wyłączony: #cbd5e1 · Kolor włączony: #ea580c · Promień: 50% · Szybkość: 200ms

Wynik

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

Sedno wzorca: stan :checked checkboxa w połączeniu z ogólnym selektorem rodzeństwa (~) steruje jednocześnie kolorem tła toru i odległością przesunięcia suwaka.

Dlaczego checkbox, a nie div z obsługą kliknięcia

Kuszące jest zbudowanie przełącznika z dwóch elementów <div> i odrobiny JavaScriptu przełączającego klasę po kliknięciu, ale takie podejście zwykle psuje nawigację z klawiatury, komunikaty czytników ekranu i wysyłanie formularzy — prawdziwy checkbox obsługuje wszystkie trzy sprawy za darmo. Wzorzec generowany przez to narzędzie zachowuje <input type="checkbox"> jako rzeczywisty element interaktywny (ukryty wizualnie, ale nadal możliwy do zaznaczenia klawiaturą), i wykorzystuje czysty CSS — bez żadnego JavaScriptu — do stylizowania toru i suwaka na podstawie natywnego stanu :checked checkboxa.

Popularne style przełączników

Klasyczny przełącznik-pigułka: promień obramowania 50%, umiarkowany rozmiar (szerokość 48–56px), wyraźna zmiana koloru między włączonym/wyłączonym.
Przełącznik w stylu panelu ustawień: mniejszy rozmiar (szerokość 36–44px), stonowany kolor wyłączony (jasnoszary) na tle koloru marki dla stanu włączonego.
Lekko zaokrąglony przełącznik: promień obramowania w okolicach 20–30% zamiast pełnej pigułki, dla bardziej prostokątnego, aplikacyjnego wyglądu.
Szybki, dynamiczny przełącznik: szybkość przejścia 100–150ms daje wrażenie natychmiastowości i responsywności.
Wolny, spokojny przełącznik: szybkość przejścia 300–400ms wygląda płynniej i bardziej dopracowanie, przydatne dla pojedynczego, wyeksponowanego przełącznika ustawień.

Łączenie z innymi narzędziami CSS

Wygenerowany tor i suwak już wewnętrznie wykorzystują border-radius, więc jeśli chcesz uzyskać wariant kwadratowy lub inaczej zaokrąglony niż oferuje suwak, Generator promienia zaokrąglenia krawędzi pozwala precyzyjnie dostosować każdy róg osobno przed wklejeniem wartości. Generator cieni ramki przydaje się do dodania subtelnego cienia suwakowi dla większej głębi.

→ Generator promienia krawędzi · Generator cieni ramki

Najczęściej zadawane pytania

Dlaczego wynik zawiera HTML, a nie tylko CSS?

Przełącznik nie jest czysto wizualny — zależy od prawdziwego <input type="checkbox"> owiniętego w <label>, plus elementów toru i suwaka, do których odnosi się CSS. Bez tej dokładnej struktury selektory oparte na :checked w wygenerowanym CSS nie miałyby się do czego odnieść, dlatego obie części są kopiowane razem.

Czy ten przełącznik jest dostępny?

Tak — ponieważ elementem interaktywnym jest prawdziwy checkbox (jedynie ukryty wizualnie techniką, która zachowuje go w drzewie dostępności, a nie za pomocą display:none), pozostaje możliwy do zaznaczenia klawiszem Tab, przełączalny spacją lub Enterem i jest poprawnie ogłaszany przez czytniki ekranu jako checkbox w aktualnym stanie zaznaczonym/niezaznaczonym.

Czy mogę użyć tego w prawdziwym formularzu HTML?

Tak. Ponieważ leżący u podstaw element to standardowy input typu checkbox, możesz nadać mu atrybuty name i value, a zostanie wysłany jak każdy inny checkbox — zaznaczone przełączniki wysyłają swoją wartość, niezaznaczone są pomijane, dokładnie jak zwykły checkbox.

Dlaczego suwak porusza się za pomocą transform, a nie zmieniając pozycję left?

Animowanie transform: translateX() jest obsługiwane przez kompozytor przeglądarki i pozostaje płynne nawet na słabszych urządzeniach, podczas gdy animowanie left wywołuje przeliczenie układu w każdej klatce. Dlatego wygenerowany CSS zawsze używa transform do ruchu przesuwania.

Co dokładnie kontroluje suwak promienia obramowania?

Skaluje jednocześnie zaokrąglenie rogów toru i suwaka, proporcjonalnie do wysokości toru. Przy 50% otrzymujesz w pełni zaokrągloną pigułkę z okrągłym suwakiem; niższe wartości utrzymują kształt bardziej prostokątny, dla bardziej kwadratowego, aplikacyjnego przełącznika.