Skip to main content
Penguin ToolsNarzędzia Pingwin

Generator paska przewijania CSS

Dostosuj wygląd paska przewijania CSS za pomocą edytora wizualnego. Reguluj kolor, szerokość, promień zaokrąglenia i kopiuj kod bezpośrednio.

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #888888 #f1f1f1;
}

Treść przewijana #1 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #2 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #3 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #4 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #5 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #6 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #7 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #8 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #9 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #10 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #11 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #12 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #13 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #14 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #15 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #16 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #17 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #18 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #19 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #20 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #21 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #22 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #23 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #24 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #25 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #26 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #27 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #28 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #29 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Treść przewijana #30 — Podgląd niestandardowego paska przewijania. Przewiń, aby zobaczyć go w akcji.

Udostępnij narzędzie
📖

Jak używać

Step 1

Ustaw styl

Ustaw styl

Ustaw szerokość paska przewijania, kolory, promień zaokrąglenia itp.

Step 2

Podgląd

Podgląd

Sprawdź wygląd paska przewijania w podglądzie na żywo

Step 3

Skopiuj CSS

Skopiuj CSS

Skopiuj wygenerowany kod CSS

✨

Funkcje

Podgląd w czasie rzeczywistym

Podgląd paska przewijania w czasie rzeczywistym podczas zmiany ustawień

Obsługa wielu przeglądarek

Automatycznie generuje CSS zarówno dla WebKit, jak i Firefox

Stany hover i aktywny

Personalizuj style stanu hover i przeciągania osobno

❓

FAQ

Tak, używając ::-webkit-scrollbar (Chrome/Safari/Edge) i scrollbar-width/scrollbar-color (Firefox).

🔗Powiązane narzędzia

🎨
Narzędzia projektowe

Przelicznik kodów kolorów

Przeliczaj między kodami kolorów HEX, RGB i HSL. Użyj próbnika kolorów i podglądu w czasie rzeczywistym do intuicyjnego wyboru kolorów.

🎨
Narzędzia projektowe

Próbnik kolorów

Intuicyjnie wybieraj kolory za pomocą koła kolorów i suwaków. Pobieraj i kopiuj kody kolorów w formatach HEX, RGB i HSL.

🎨
Narzędzia projektowe

Ekstraktor kolorów obrazu

Automatycznie wykrywaj dominujące kolory z obrazu i generuj paletę kolorów. Możesz też kliknąć dowolne miejsce na obrazie, aby wybrać pojedyncze kolory.

🎯
Narzędzia projektowe

Pobieracz średniego koloru obrazu

Oblicz średni kolor całego obrazu lub wybranego obszaru. Przydatny do wybierania schematów kolorów lub kolorów tła miniatur.

🌈
Narzędzia projektowe

Generator CSS gradient

Wizualnie twórz gradienty CSS za pomocą przeciąganych kontrolek. Obsługuje typy gradientów liniowych, radialnych i stożkowych z presetami.

🔲
Narzędzia projektowe

Generator CSS box-shadow

Wizualnie twórz CSS box-shadow za pomocą suwaków. Obsługuje wiele cieni i cienie wewnętrzne.