Skip to main content
Penguin ToolsPinguin-Tools

CSS-Scrollleisten-Generator

CSS-Scrollleisten-Design mit einem visuellen Editor anpassen. Farbe, Breite, Eckenradius anpassen und den Code direkt kopieren.

/* 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;
}

Scroll-Inhalt #1 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #2 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #3 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #4 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #5 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #6 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #7 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #8 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #9 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #10 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #11 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #12 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #13 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #14 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #15 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #16 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #17 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #18 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #19 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #20 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #21 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #22 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #23 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #24 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #25 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #26 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #27 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #28 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #29 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Scroll-Inhalt #30 - Vorschau Ihrer benutzerdefinierten Scrollleiste. Scrollen Sie, um sie in Aktion zu sehen.

Tool teilen
📖

Anleitung

Step 1

Stil festlegen

Stil festlegen

Scrollleistenbreite, Farben, Eckenradius usw. festlegen

Step 2

Vorschau

Vorschau

Scrollleisten-Darstellung in der Echtzeit-Vorschau überprüfen

Step 3

CSS kopieren

CSS kopieren

Kopieren Sie den erzeugten CSS-Code

✨

Funktionen

Echtzeit-Vorschau

Scrollleiste in Echtzeit beim Ändern der Einstellungen in der Vorschau anzeigen

Browser-übergreifende Unterstützung

CSS sowohl für WebKit als auch für Firefox automatisch erzeugen

Hover- und Aktiv-Zustände

Hover- und Klick-Zustände individuell gestalten

❓

FAQ

Ja, mit ::-webkit-scrollbar (Chrome/Safari/Edge) und scrollbar-width/scrollbar-color (Firefox).

🔗Verwandte Tools

🎨
Design-Tools

Farbcode-Konverter

Konvertieren Sie zwischen HEX-, RGB- und HSL-Farbcodes. Verwenden Sie die Farbauswahl und Echtzeit-Vorschau für intuitive Farbwahl.

🎨
Design-Tools

Farbwähler

Wählen Sie Farben intuitiv mit einem Farbrad und Schiebereglern. Farbcodes in HEX, RGB und HSL kopieren.

🎨
Design-Tools

Bild-Farbextraktor

Dominante Farben aus einem Bild automatisch erkennen und eine Farbpalette erzeugen. Sie können auch auf eine beliebige Stelle im Bild klicken, um einzelne Farben aufzunehmen.

🎯
Design-Tools

Bild-Durchschnittsfarbe-Picker

Berechnen Sie die Durchschnittsfarbe eines gesamten Bildes oder eines ausgewählten Bereichs. Nützlich für Farbschemata oder Thumbnail-Hintergrundfarben.

🌈
Design-Tools

CSS Farbverlauf-Generator

Erstellen Sie CSS-Farbverläufe visuell mit Ziehsteuerung. Unterstützt lineare, radiale und konische Farbverläufe mit Vorlagen.

🔲
Design-Tools

CSS Box-Shadow-Generator

Erstellen Sie CSS box-shadow visuell mit Schiebereglern. Unterstützt mehrere Schatten und Inset-Schatten.