CSS Scrollbar Styler
Zaprojektuj własny scrollbar CSS z wyborem kolorów, zaokrąglenia i dark mode. Generator tworzy gotowy kod dla Chrome, Firefox, Edge i Safari. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Stylizator pasków przewijania CSS — generator kodu online
Zaprojektuj własny pasek przewijania dla dowolnej strony internetowej. Wybierz kolory, zaokrąglenie, grubość i opcje dark mode — narzędzie wygeneruje gotowy kod CSS kompatybilny z Chrome, Edge, Safari i Firefox.
Czym jest stylizacja paska przewijania?
Pasek przewijania (scrollbar) to element interfejsu przeglądarki pozwalający poruszać się po zawartości strony. Dzięki CSS możesz zmienić jego wygląd — kolor, kształt i rozmiar. Pseudoelementy ::-webkit-scrollbar obsługują Chrome, Edge i Safari, a właściwość scrollbar-color działa w Firefox. Generator tworzy gotowy kod dla obu silników jednocześnie.
Jakie opcje oferuje narzędzie?
Możesz ustawić grubość paska (2–32 px), zaokrąglenie kciuka (0–24 px), kolory toru i kciuka w trybie jasnym i ciemnym, gradient kciuka, cień, obramowanie oraz przyciski nawigacyjne. Tryb ciemny można wyzwolić przez prefers-color-scheme lub własną klasę CSS. Dostępny jest też eksport do postaci zminifikowanej.
Kompatybilność z przeglądarkami
Generowany kod działa w Chrome, Edge i Safari dzięki pseudoelementom ::-webkit-scrollbar-* oraz w Firefox dzięki właściwości scrollbar-color i scrollbar-width. Dla starszych wersji Firefox narzędzie pozwala wybrać wariant thin lub ukryć pasek całkowicie.
Jak wkleić kod na stronę?
Skopiuj wygenerowany CSS i wklej go do pliku arkusza stylów lub znacznika <style> w sekcji <head>. Możesz ograniczyć styl do konkretnych elementów, wpisując ich selektory (np. .scroll-area, body) w polu selektorów. Kod działa bez żadnych bibliotek JavaScript.
Najczęstsze pytania
Czy pasek przewijania CSS działa w Firefox?
Firefox nie obsługuje pseudoelementów ::-webkit-scrollbar, ale obsługuje właściwości scrollbar-color i scrollbar-width. Generator tworzy obie wersje, dzięki czemu efekt jest widoczny w każdej współczesnej przeglądarce.
Czy mogę użyć dowolnego koloru — nie tylko hex?
Tak. Pole koloru akceptuje dowolną wartość CSS: #hex, rgb(), rgba(), hsl() oraz nazwane kolory (red, transparent). Upewnij się tylko, że wartość jest poprawna składniowo.
Jak działają selektory CSS w generatorze?
Wpisz selektory CSS oddzielone enterami lub przecinkami — np. body, .scroll-area, #sidebar. Generator zastosuje styl paska przewijania do każdego z nich osobno, co daje precyzyjną kontrolę nad wyglądem w różnych sekcjach strony.
Co daje opcja „Gradient kciuka"?
Włączenie gradientu zastępuje jednobarwne wypełnienie kciuka gradientem liniowym od koloru podstawowego do koloru końcowego. Efekt jest subtelny i nadaje paskowi nowoczesny wygląd, szczególnie przy większej grubości.
Generator CSS Scrollbar Styler to szybki sposób na spersonalizowanie interfejsu bez sięgania po zewnętrzne biblioteki. Sprawdź też nasze narzędzia CSS do tworzenia kształtów clip-path i generowania gradientów tła.