Stylizator pasków przewijania CSS

Zaprojektuj własny scrollbar CSS z wyborem kolorów, zaokrąglenia i dark mode. Generator tworzy gotowy kod dla Chrome, Firefox, Edge i Safari.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Parametry paska przewijania

Selektory CSS

36 / 5000 znaków

Grubość 10px

Zaokrąglenie 12px

Kolory (tryb jasny)

Tło toru

Kolor kciuka

Hover kciuka

Aktywny kciuk

Opcje dodatkowe

Obramowanie kciuka 2px

Kolor obramowania

Cień kciuka 6px

Kolor cienia

Gradient kciuka Wypełnienie gradientem

Kolor końca gradientu

Przyciski nawigacji Strzałki scrollbara

Komentarz w CSS Blok komentarza nagłówkowego

Tryb ciemny Dodaj wariant dark mode

Kolory (tryb ciemny)

Tło toru (ciemny)

Kciuk (ciemny)

Hover (ciemny)

Aktywny (ciemny)

Wyzwalacz trybu ciemnego

Szerokość Firefox

Format wyjścia

Parametry paska na żywo

Grubość paska

10 px

suwak 2–32 px → ::-webkit-scrollbar width/height

Tło toru

#F2F4F8

::-webkit-scrollbar-track i drugi kolor scrollbar-color

Kolor kciuka

#FA8617

::-webkit-scrollbar-thumb i pierwszy kolor scrollbar-color

Firefox (scrollbar-width)

Auto

standard: tylko symboliczna szerokość

Podgląd na żywo

Wypróbuj swój pasek przewijania!

Zmień parametry w lewym panelu (takie jak grubość, kolory czy zaokrąglenie), a suwak tego pola natychmiast dostosuje się do Twoich ustawień.

Ten kontener podglądu symuluje rzeczywiste działanie stylów CSS paska przewijania. Możesz go przewijać w pionie, najechać na niego kursorem myszy oraz kliknąć na suwak.

Scrollbar Styler pozwala na pełne dostosowanie paska przewijania w przeglądarkach opartych na silniku WebKit (Chrome, Safari, Edge, Opera) za pomocą pseudoelementów, a także w przeglądarce Firefox za pomocą natywnych właściwości.

Dzięki temu Twoja witryna zyskuje spójny, profesjonalny i unikalny wygląd na wszystkich urządzeniach.

Wygenerowany CSS

/* Wygenerowano przez Toolsti — Stylizator pasków przewijania CSS */
/* WebKit: Chrome/Edge/Safari | Firefox: scrollbar-width + scrollbar-color */

.scroll-area {
  scrollbar-width: auto;
  scrollbar-color: #FA8617 #F2F4F8;
}

.scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
  background: #F2F4F8;
  border-radius: 12px;
}
.scroll-area::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FA8617, #FFB15D);
  border-radius: 12px;
  border: 2px solid #FFFFFF;
  background-clip: padding-box;
  box-shadow: 0 0 6px rgba(0,0,0,.18);
}
.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #FF9B3D;
}
.scroll-area::-webkit-scrollbar-thumb:active {
  background: #E56F00;
}


.chat-panel {
  scrollbar-width: auto;
  scrollbar-color: #FA8617 #F2F4F8;
}

.chat-panel::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.chat-panel::-webkit-scrollbar-track {
  background: #F2F4F8;
  border-radius: 12px;
}
.chat-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FA8617, #FFB15D);
  border-radius: 12px;
  border: 2px solid #FFFFFF;
  background-clip: padding-box;
  box-shadow: 0 0 6px rgba(0,0,0,.18);
}
.chat-panel::-webkit-scrollbar-thumb:hover {
  background: #FF9B3D;
}
.chat-panel::-webkit-scrollbar-thumb:active {
  background: #E56F00;
}


.code-block {
  scrollbar-width: auto;
  scrollbar-color: #FA8617 #F2F4F8;
}

.code-block::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.code-block::-webkit-scrollbar-track {
  background: #F2F4F8;
  border-radius: 12px;
}
.code-block::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FA8617, #FFB15D);
  border-radius: 12px;
  border: 2px solid #FFFFFF;
  background-clip: padding-box;
  box-shadow: 0 0 6px rgba(0,0,0,.18);
}
.code-block::-webkit-scrollbar-thumb:hover {
  background: #FF9B3D;
}
.code-block::-webkit-scrollbar-thumb:active {
  background: #E56F00;
}


@media (prefers-color-scheme: dark) {
  .scroll-area {
    scrollbar-color: #374151 #0B1220;
  }

  .scroll-area::-webkit-scrollbar-track {
    background: #0B1220;
  }
  .scroll-area::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #374151, #4B5563);
  }
  .scroll-area::-webkit-scrollbar-thumb:hover {
    background: #4B5563;
  }
  .scroll-area::-webkit-scrollbar-thumb:active {
    background: #6B7280;
  }

  .chat-panel {
    scrollbar-color: #374151 #0B1220;
  }

  .chat-panel::-webkit-scrollbar-track {
    background: #0B1220;
  }
  .chat-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #374151, #4B5563);
  }
  .chat-panel::-webkit-scrollbar-thumb:hover {
    background: #4B5563;
  }
  .chat-panel::-webkit-scrollbar-thumb:active {
    background: #6B7280;
  }

  .code-block {
    scrollbar-color: #374151 #0B1220;
  }

  .code-block::-webkit-scrollbar-track {
    background: #0B1220;
  }
  .code-block::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #374151, #4B5563);
  }
  .code-block::-webkit-scrollbar-thumb:hover {
    background: #4B5563;
  }
  .code-block::-webkit-scrollbar-thumb:active {
    background: #6B7280;
  }
}

3 Selektory 3,147 B Rozmiar 2,561 B Po minifikacji 18.6% Oszczędność

Ściąga: części CSS scrollbara generowane przez narzędzie

Silnik generuje jednocześnie wariant WebKit (pseudoelementy) i standardowy (scrollbar-width + scrollbar-color na selektorach)
Selektor / własność	Co steruje (deklaracje z silnika)	Gdzie działa
::-webkit-scrollbar	width / height: Npx — grubość pionowego i poziomego paska	Chrome, Edge, Safari, Opera (WebKit)
::-webkit-scrollbar-track	background + border-radius — tło toru i jego zaokrąglenie	Chrome, Edge, Safari, Opera (WebKit)
::-webkit-scrollbar-thumb	background (kolor lub gradient), border-radius, opcjonalnie border z background-clip: padding-box i box-shadow	Chrome, Edge, Safari, Opera (WebKit)
::-webkit-scrollbar-thumb:hover / :active	osobne kolory tła dla najechania i kliknięcia kciuka	Chrome, Edge, Safari, Opera (WebKit)
::-webkit-scrollbar-button	opcjonalne przyciski nawigacji na końcach paska (width/height, tło przezroczyste)	Chrome, Edge, Safari, Opera (WebKit) — opcja w narzędziu
scrollbar-width	auto / thin / none — symboliczna szerokość paska	Firefox 64+ (standard CSS Scrollbars)
scrollbar-color	kolor kciuka + kolor toru w jednej deklaracji	Firefox 64+ (standard CSS Scrollbars)

Firefox ignoruje pseudoelementy ::-webkit-scrollbar i obsługuje wyłącznie dwie własności standardowe: scrollbar-width (auto/thin/none — bez dokładnej liczby pikseli) oraz scrollbar-color (dwa kolory: kciuk i tor, bez zaokrągleń, gradientu, hover i cienia). Przeglądarki WebKit na odwrót ignorują scrollbar-color, dlatego pełny kod musi zawierać oba warianty — tak jak w oknie „Wygenerowany CSS”.

Warto wiedzieć — stylizacja scrollbara a wygoda użytkowników

Nie chowaj paska przy treści przewijanej

Ukryty scrollbar (scrollbar-width: none lub ::-webkit-scrollbar { display: none }) odbiera jedyną wskazówkę, że pole ma więcej treści. Wąski pasek zostawiaj tylko tam, gdzie przewijanie jest oczywiste (czaty, listy), a jeśli już ukrywasz, dodaj inny sygnał — częściowo widoczną następną kartę albo gradient ciecia.

Kontrast kciuka do toru i tryb ciemny

Kciuk musi być widoczny na tle toru przy każdej jasności strony — dlatego generator osobno prowadzi zestaw jasny i ciemny (opcja „Tryb ciemny” z wyzwalaczem prefers-color-scheme lub klasą). Najmniejsza dopuszczalna grubość dla wygody trafień palcem to ok. 10–12 px; thin w Firefoksie jest symboliczny i węższy od standardowego.

Grubość wpływa na layout

Zmiana grubości paska przesuwa dostępną szerokość treści w polu przewijanym — elementy mogą się przeliczyć w trakcie ładowania. W CSS istnieje scrollbar-gutter: stable, który rezerwuje miejsce na pasek również wtedy, gdy przewijanie nie jest potrzebne. W Safari i Firefox na urządzeniach dotykowych paski są zwykle systemowe i nakładki — stylizacja tam nie wygląda.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

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.

CSS Scrollbar::-webkit-scrollbarscrollbar-colordark modecross-browser

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.

Jak silniki przeglądarek renderują stylizowany pasek

Przeglądarka nie traktuje paska przewijania jako jednego prostokąta. Rozbija go na kilka części: tor (track), kciuk (thumb), przyciski na końcach oraz narożnik, w którym stykają się pasek pionowy i poziomy. W Chrome, Edge i Safari każda z tych części jest osobnym pseudoelementem: ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button i ::-webkit-scrollbar-corner. Styluje się je podobnie jak zwykłe elementy — width lub height ustala grubość paska, background kolor kciuka, border-radius zaokrąglenie, a box-shadow cień.

Kciuk nie ma długości ustawianej w CSS. Jego wysokość wynika ze stosunku widocznej części treści do całej zawartości kontenera i silnik wylicza ją sam przy każdym przewinięciu. Z tego powodu nie da się zapisać w arkuszu, że kciuk ma być krótszy lub dłuższy niż naturalnie — można zmieniać wyłącznie jego wygląd. Znaczenie ma też zasięg reguły: pseudoelementy nie mają klas ani identyfikatorów, więc adresuje się je przez selektor kontenera. Reguła na html lub body obejmuje pasek całej strony, a reguła na .panel tylko pasek tego elementu. Styl zadziała wyłącznie tam, gdzie element faktycznie przewija treść, czyli ma ustawione overflow: auto lub scroll i zawartość wykraczającą poza jego obszar.

Firefox nie zna pseudoelementów ::-webkit-scrollbar, więc opiera się na właściwościach standardowych: scrollbar-color przyjmuje dwa kolory (najpierw kciuk, potem tor), a scrollbar-width wartość auto, thin albo none. Chromium również obsługuje te właściwości i nadaje im pierwszeństwo — jeśli na danym elemencie ustawisz scrollbar-color, reguły ::-webkit-scrollbar dla tego elementu zostaną pominięte. Dlatego oba zestawy trzeba rozdzielić: właściwości standardowe warto ograniczyć do Firefoksa za pomocą zapytania @supports, a szczegółową stylizację zostawić pseudoelementom. Minifikacja zmienia tylko zapis, nie kolejność ani zasięg reguł.

Przykład: pasek w panelu z wynikami wyszukiwania

Przygotowanie kontenera. Zakładamy, że na stronie jest panel .panel z listą wyników, ustawioną wysokością maksymalną i overflow-y: auto. Bez przewijania w środku pasek w ogóle się nie pojawi, więc to warunek startowy.
Ustawienie parametrów geometrycznych. W narzędziu wpisujemy selektor .panel, grubość 10 px (mieszczą się w zakresie 2–32 px) oraz zaokrąglenie kciuka 6 px (zakres 0–24 px).
Kolory dla obu trybów. Dla trybu jasnego tor #e5e7eb i kciuk #4b5563, dla trybu ciemnego tor #27272a i kciuk #a1a1aa. Jako wyzwalacz wybieramy prefers-color-scheme, żeby paleta zmieniała się razem z ustawieniem systemu.
Stany i wykończenie. Włączamy zmianę koloru kciuka po najechaniu kursorem oraz delikatny cień, dzięki czemu kciuk wygląda na chwytny element, a nie płaski prostokąt.
Wklejenie kodu. Skopiowany CSS trafia do arkusza stylów. Blok standardowy z scrollbar-color i scrollbar-width powinien być ograniczony do Firefoksa, a blok pseudoelementów obejmuje Chrome, Edge i Safari dla tego samego selektora .panel.
Weryfikacja. Przewijamy panel w Chrome lub Edge i sprawdzamy grubość oraz zaokrąglenie, potem to samo w Firefoxie, gdzie liczą się kolor kciuka, kolor toru i wariant thin. Na koniec przełączamy system na tryb ciemny i upewniamy się, że paleta podmienia się automatycznie, a nie dopiero po odświeżeniu.
Wersja produkcyjna. Gotowy zestaw eksportujemy w postaci zminifikowanej i podmieniamy w arkuszu dopiero po testach, żeby nie debugować kodu bez spacji i komentarzy.

Tabela referencyjna: co odpowiada za który element paska

Selektor lub właściwość	Silnik przeglądarki	Za co odpowiada
::-webkit-scrollbar	Chrome, Edge, Safari	Grubość całego paska pionowego i poziomego
::-webkit-scrollbar-track	Chrome, Edge, Safari	Kolor i wygląd toru, po którym przesuwa się kciuk
::-webkit-scrollbar-thumb	Chrome, Edge, Safari	Kolor, gradient, obramowanie i zaokrąglenie kciuka
::-webkit-scrollbar-thumb:hover	Chrome, Edge, Safari	Wygląd kciuka po najechaniu kursorem
::-webkit-scrollbar-button	Chrome, Edge, Safari	Przyciski strzałek na końcach paska, można je ukryć
::-webkit-scrollbar-corner	Chrome, Edge, Safari	Narożnik, w którym stykają się oba paski
scrollbar-color	Firefox	Kolor kciuka i toru podany jednym skrótem
scrollbar-width	Firefox	Szerokość paska: auto, thin albo none

Praktyczne wskazówki przy projektowaniu paska

Zadbaj o kontrast kciuka i toru. Kciuk musi być wyraźnie ciemniejszy lub jaśniejszy od toru, inaczej użytkownik nie odróżni uchwytu od tła, zwłaszcza na ekranie w słońcu.
Ograniczaj styl do jednego kontenera. Wpisz selektor konkretnego elementu zamiast body, jeśli chcesz zmienić wygląd tylko w panelu bocznym albo polu z kodem — pasek całej strony zostanie wtedy nietknięty.
Nie ukrywaj paska bez powodu. Ukryty pasek utrudnia orientację, jak dużo treści zostało do końca, dlatego wersję none stosuj tylko przy własnym wskaźniku przewijania.
Testuj na obu silnikach przed wdrożeniem. Ten sam kod daje inny efekt w Chrome i w Firefoxie, bo Firefox obsługuje tylko kolor i szerokość, bez gradientu, cienia i zaokrąglenia.
Trzymaj kod w jednym miejscu. Powielenie reguł dla kilku selektorów prowadzi do sytuacji, w której jedna zmiana koloru wymaga edycji w kilku blokach i łatwo o niespójność.

Ograniczenia i czynniki zakłócające

Brak pełnej zgodności wyglądu. Firefox przyjmuje wyłącznie kolor i szerokość, więc gradient, cień, obramowanie i zaokrąglenie kciuka zobaczy tylko użytkownik Chrome, Edge lub Safari.
Systemowe paski nakładkowe. Na części konfiguracji, zwłaszcza z wyłączonymi stałymi paskami, przeglądarka pokazuje pasek tylko na czas przewijania i może ignorować część ustawień.
Wersje mobilne. W wielu przeglądarkach na telefonie pasek jest rysowany przez system i nie reaguje na reguły z arkusza, mimo poprawnego kodu.
Nadpisywanie przez inne reguły. Jeśli w projekcie jest już ustawione scrollbar-color albo globalny reset stylów, Twoje reguły mogą zostać pominięte lub nadpisane, dlatego po wdrożeniu sprawdź, co faktycznie wygrywa w kaskadzie.

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.

Dlaczego moje reguły ::-webkit-scrollbar przestały działać, gdy dodałem scrollbar-color?

Chromium traktuje właściwości standardowe jako nadrzędne. Jeśli na tym samym elemencie ustawisz scrollbar-color, pseudoelementy WebKit dla niego są pomijane. Rozwiązanie to ograniczenie właściwości standardowych do Firefoksa, na przykład zapytaniem @supports.

Czy mogę wystylizować pasek tylko w jednym kontenerze, a nie na całej stronie?

Tak. W polu selektorów wpisz selektor tego elementu, na przykład .panel albo .kod, i upewnij się, że ma on ustawione overflow. Reguła obejmie wtedy wyłącznie pasek tego kontenera.

Czy da się ukryć pasek i nadal przewijać treść?

Tak, ustawiając szerokość paska na none oraz zerową grubość pseudoelementu. Przewijanie kółkiem, gestem i klawiaturą nadal działa, ale użytkownik traci wskaźnik długości treści, więc warto dodać własny wskaźnik.

Czy stylizacja paska działa na macOS i iOS?

Na macOS w przeglądarkach opartych na Chromium i w Safari stylowanie zwykle działa, ale system może pokazywać pasek tylko podczas przewijania. Na iOS pasek bywa rysowany przez system i wtedy reguły CSS nie mają wpływu.

Czy własny pasek przewijania wpływa na wydajność strony?

Sam CSS nie dodaje pracy w JavaScript, więc koszt jest znikomy. Uwaga dotyczy raczej efektów: rozbudowany gradient i cień na kciuku są przerysowywane przy każdym przewinięciu długiej listy i mogą być odczuwalne na słabszych urządzeniach.

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.