Category: Developer tools
CSS Scrollbar Generator
Create browser-local custom scrollbar CSS with a live preview
Design custom scrollbars with a live preview and copy CSS for scrollbar-color, scrollbar-width and WebKit scrollbar styling. Generated in your browser.
Preview
/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
scrollbar-color: #8a9a8f #eceee9;
scrollbar-width: thin;
}
/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: #eceee9;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #8a9a8f;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
background: #6f8076;
}
scrollbar-color and scrollbar-width are the standard properties and are what Firefox and current Chrome use. The ::-webkit- rules are a non-standard prefix kept for older Chrome, Edge and Safari — the two engines will not render identically.
The preview and the generated CSS are both produced in your browser.
Everything on this page is processed in your browser. Nothing is uploaded.
What this tool does
Scrollbar styling is split across two mechanisms. The CSS Scrollbars Styling module gives you `scrollbar-color` and `scrollbar-width` — two properties, broad support including Firefox, and deliberately limited control. The older `::-webkit-scrollbar` pseudo-elements give you far more, but they are a non-standard prefix. This generator emits the standard properties first and the WebKit block after it, labelled, so you get wide coverage without pretending the two are the same thing. They will not render identically, and a scrollbar is a control people rely on, so the preview here scrolls for real rather than showing a drawing of one.
How to use it
- Set the selector for the element you want to style, then pick thumb, track and hover colours.
- Choose scrollbar-width, and set the WebKit width and radius.
- Scroll the preview to check it, then copy the CSS.
Privacy
This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.
Frequently asked questions
- Do custom scrollbars work in every browser?
- Not identically. scrollbar-color and scrollbar-width work in Firefox and current Chrome and Edge; the ::-webkit- rules cover older Chrome, Edge and Safari. The tool emits both, but the two engines draw scrollbars differently and no CSS makes them match exactly.
- What is scrollbar-color?
- The standard property that sets the thumb and track colours in one declaration — thumb first, then track. It is part of the CSS Scrollbars Styling module, so it is the version to lead with.
- Why include WebKit scrollbar CSS at all?
- Because the standard properties only expose colour and a coarse width, and because older WebKit and Blink versions do not support them. The prefixed rules add explicit sizing and radius and cover those browsers.
- Should I hide the scrollbar completely?
- Be careful. scrollbar-width: none removes a visible affordance that tells people the area scrolls and lets them drag through it, which hurts anyone not using a scroll wheel or trackpad. Consider a thin, high-contrast bar instead.