CSS scrollbar stijl generator
Creëer aangepaste scrollbar-stijlen met ::-webkit-scrollbar en scrollbar-width/scrollbar-color CSS-regels voor alle grote browsers.
CSS scrollbar stijl generator
De standaard browserschuifbalk past zelden in het ontwerp van een website, en het aanpassen ervan betekent dat je twee verschillende specificaties tegelijk moet onthouden: de WebKit ::-webkit-scrollbar pseudo-elementen die Chrome, Safari en Edge gebruiken, en de standaard scrollbar-width/scrollbar-color eigenschappen die Firefox leest. Deze tool genereert beide tegelijk op basis van een paar opties, zodat je één CSS-blok kopieert en elke grote browser een overeenkomstige scrollbalk weergeeft.
Stel een doelselector in – body voor de hele pagina, of een klasse zoals .sidebar voor één scrollbaar paneel – en kies vervolgens de breedte van de scrollbalk in pixels, de track- en duimkleuren, en de kleur waarin de duim overgaat bij hover. Duim afronding bepaalt de border-radius van de sleepbare balk, en de inzetrand voegt een transparante ruimte toe tussen de duim en de track, zodat deze eruitziet als een zwevende pil in plaats van een massief blok. Met de optie Variant wissel je tussen de normale scrollbalk van de browser, een slankere "Dun" scrollbalk, en "Verborgen", wat de scrollbalk volledig verwijdert met -ms-overflow-style en scrollbar-width: none terwijl het scrollen van het element zelf ongewijzigd blijft.
Als je de donkere-modus-variant inschakelt, wordt een tweede kopie van de regels verpakt in een @media (prefers-color-scheme: dark) blok, met de track- en duimkleuren automatisch verduisterd zodat een site die al van thema wisselt, een scrollbalk krijgt die met het thema meeverandert – geen aparte berekening nodig. Elke optie werkt de uitvoer live bij terwijl je deze aanpast, en het totaal onder het resultaat geeft aan hoeveel CSS-regelblokken er zijn gegenereerd en het exacte aantal tekens.
Alles draait lokaal in je browser: geen selector, kleur of CSS wordt ooit naar een server gestuurd. Kopieer het resultaat rechtstreeks naar je stylesheet, download het als .txt-bestand, of stuur het naar de invoer van een ander tool om het verder aan te passen.