CSS-Scrollbar-Generator
Farbe, Breite und Rundung einstellen und daraus fertiges CSS für eigene Scrollbalken erzeugen
Mit diesem Werkzeug passen Sie die schlichte Standard-Scrollbar des Browsers an das Design Ihrer Website an. Farbe von Griff (Thumb) und Track, Breite sowie Eckenrundung stellen Sie bequem über Schieberegler und Farbwähler ein und sehen das Ergebnis sofort in der Vorschau. Sämtliche Berechnungen laufen ausschließlich in Ihrem Browser, sodass Sie den fertigen CSS-Code ohne jede Serverübertragung erhalten.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Legen Sie über den Farbwähler oder das HEX-Feld die Farbe des Griffs und die Farbe des Tracks (Hintergrund) fest.
- Bewegen Sie die Regler für Breite und Rundung, bis die Scrollbar Ihren Vorstellungen entspricht.
- Scrollen Sie in der Vorschaubox darüber, um das Ergebnis in Aktion zu prüfen.
- Kopieren Sie den fertigen CSS-Code über die Schaltfläche „CSS kopieren“ und fügen Sie ihn in das Stylesheet Ihres Projekts ein.
FAQ
- Funktioniert das erzeugte CSS in allen Browsern?
- Ja. Ausgegeben werden sowohl die Pseudoelement-Syntax ::-webkit-scrollbar für WebKit-basierte Browser (Chrome, Safari, Edge) als auch die Standardeigenschaften scrollbar-color und scrollbar-width für Firefox. Damit greift der Stil in beiden Rendering-Engines.
- Wo muss ich das erzeugte CSS einbinden?
- Ersetzen Sie den Klassennamen .custom-scrollbar am Anfang des Codes durch den Klassennamen Ihres Elements und weisen Sie diese Klasse dem Element zu. Der Stil gilt dann nur für den Scrollbereich innerhalb dieses Elements.
- Werden meine Eingaben an einen Server übertragen?
- Nein. Farbauswahl und CSS-Erzeugung finden vollständig im Browser statt, es werden keinerlei Daten nach außen gesendet.