CSS Scrollbar Generator
Custom scrollbar CSS with scrollbar-color and ::-webkit-scrollbar.
About this tool
Choose whether to style one scrolling element or the whole page, the standard width (thin, auto or none), the WebKit width, radius and thumb inset, and the thumb, hover and track colours. Scroll the live preview, then copy the CSS.
How scrollbar styling works today
There are two ways to style scrollbars, and good CSS uses both. The standard properties, scrollbar-width (auto, thin or none) and scrollbar-color (thumb colour then track colour), work in Firefox, in Chrome and Edge from version 121, and in newer Safari. They're simple and respect the platform's scrollbar behaviour. The older ::-webkit-scrollbar pseudo-elements (-thumb, -track, -corner, with :hover) give pixel-level control over width, rounded thumbs and borders, and still work in Chromium and Safari. In browsers that support the standard properties, setting them may cause the WebKit rules to be ignored. The generator puts the WebKit rules inside @supports selector(::-webkit-scrollbar) and pairs them with the standard ones, so every browser gets a sensible result. A "thumb inset" (a border in the track colour) makes a slim floating thumb. Honest limits: scrollbars will look a little different in each browser. macOS overlay scrollbars and mobile browsers often ignore custom styles, hiding scrollbars hurts usability on scrollable content, and thumb and track need enough contrast to be seen. The CSS toggle switch generator, the CSS gradient generator and the contrast checker are related.
Frequently asked questions
How do I change the scrollbar colour in CSS?
Use scrollbar-color: thumbColour trackColour; on the scrolling element (or html for the page).
How do I make a thin scrollbar?
Use scrollbar-width: thin, plus ::-webkit-scrollbar { width: 8px } for older Chromium and Safari.
Can I hide the scrollbar but keep scrolling?
scrollbar-width: none does this, but avoid it where people need to know content scrolls.
Is anything stored or sent?
No. Everything is generated in your browser and nothing is stored or sent.