CSS-Scrollbar-Stil-Generator
Erstelle benutzerdefinierte Scrollbar-Stile mit ::-webkit-scrollbar und scrollbar-width/scrollbar-color CSS-Regeln für Chrome, Safari, Firefox und Edge.
CSS-Scrollbar-Stil-Generator
Die Standard-Browser-Scrollbar passt selten zum Rest eines Designs, und das Gestalten einer Scrollbar bedeutet, sich zwei verschiedene Spezifikationen gleichzeitig zu merken: die WebKit ::-webkit-scrollbar Pseudo-Elemente, die Chrome, Safari und Edge verwenden, und die Standard-Eigenschaften scrollbar-width und scrollbar-color, die Firefox stattdessen liest. Dieses Tool generiert beide gleichzeitig aus wenigen Optionen, sodass Sie einen CSS-Block kopieren können und jeder große Browser eine übereinstimmende Scrollbar rendert.
Legen Sie einen Zielwähler fest – Body für die ganze Seite oder eine Klasse wie .sidebar für ein scrollbares Panel – und wählen Sie dann die Breite der Scrollbar in Pixeln, die Spur- und Daumenfarben sowie die Farbe, zu der der Daumen beim Hover wechselt. Die Daumenfinger-Rundheit steuert den border-radius des ziehbaren Balkens, und der innere Rand fügt einen transparenten Abstand zwischen Daumen und Spur ein, sodass dieser wie ein schwebender Punkt statt eines Blocks aussieht. Die Option Variante wechselt zwischen der normalen Scrollbar des Browsers, einer schlankeren "Dünn"-Scrollbar und "Ausgeblendet", die die Scrollbar mit -ms-overflow-style und scrollbar-width: none ganz entfernt, während das Scrollen des Elements selbst unangetastet bleibt.
Wenn Sie die Dunkelmodus-Variante aktivieren, wird eine zweite Kopie der Regeln in einem @media (prefers-color-scheme: dark)-Block eingebunden, wobei die Spur- und Daumenfarben automatisch verdunkelt werden, sodass eine Website, die bereits Designs wechselt, eine Scrollbar erhält, die mit ihr wechselt – ohne separate Berechnung erforderlich. Jede Option aktualisiert die Ausgabe live, während Sie sie anpassen, und die Summe unter dem Ergebnis zeigt an, wie viele CSS-Regelblöcke generiert wurden und die genaue Zeichenanzahl.
Alles läuft lokal in Ihrem Browser ab: Kein Wähler, keine Farbe oder CSS wird jemals an einen Server gesendet. Kopieren Sie das Ergebnis direkt in Ihr Stylesheet, laden Sie es als .txt-Datei herunter oder senden Sie es an die Eingabe eines anderen Tools, um es weiter zu verfeinern.