CSS Scrollbar Generator
Style scrollbars with the modern scrollbar-color/width properties, plus a WebKit fallback
Live preview
Scrollable content line 1
Scrollable content line 2
Scrollable content line 3
Scrollable content line 4
Scrollable content line 5
Scrollable content line 6
Scrollable content line 7
Scrollable content line 8
Scrollable content line 9
Scrollable content line 10
Scrollable content line 11
Scrollable content line 12
Scrollable content line 13
Scrollable content line 14
Scrollable content line 15
Scrollable content line 16
Scrollable content line 17
Scrollable content line 18
Scrollable content line 19
Scrollable content line 20
Preview reflects the standard scrollbar-width/color properties (Firefox and modern Chromium) — the WebKit fallback below won't render identically in every browser.
.scroll-container {
scrollbar-width: thin;
scrollbar-color: #a855f7 #111111;
}
/* Chromium/Safari fallback — scrollbar-width/color alone don't cover every browser yet */
.scroll-container::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-container::-webkit-scrollbar-track {
background: #111111;
}
.scroll-container::-webkit-scrollbar-thumb {
background: #a855f7;
border-radius: 8px;
}About this tool
The CSS Scrollbar Generator builds custom scrollbar styling using the modern, standards-based scrollbar-width and scrollbar-color properties — both reached Baseline widely available status in 2025/2026, meaning they're now safe to use in production without a vendor-prefixed workaround being the only option. Since browser support still varies in exactly how each renders, the tool also generates a ::-webkit-scrollbar fallback (track, thumb, and radius) alongside the standard properties, so the same visual result degrades gracefully rather than depending on one code path alone. Live preview lets you see the actual standard-properties result as you adjust colors, width, and thickness.
When to use it
- →Matching a scrollable panel or sidebar's scrollbar to your app's accent color instead of the OS default
- →Building a thin, unobtrusive scrollbar for a chat panel or code editor UI
- →Hiding a scrollbar entirely (scrollbar-width: none) while keeping the element scrollable
- →Getting both the modern standard CSS and a WebKit fallback without hand-writing the vendor-prefixed rules
Tips
- ◆scrollbar-width: none hides the scrollbar visually but the element stays scrollable (via wheel, touch, or keyboard) — useful for horizontally-scrolling chip lists or tab bars where a visible scrollbar looks out of place.
- ◆The WebKit thumb radius only affects ::-webkit-scrollbar-thumb — the standard scrollbar-color property has no equivalent radius control, since its rendering is left to the browser/OS.
- ◆Apply scrollbar styles to the specific scrolling container (overflow-y: scroll/auto), not to html or body, unless you actually want to restyle the page's own outer scrollbar.
Frequently asked questions
Do I still need the ::-webkit-scrollbar fallback in 2026?
scrollbar-width and scrollbar-color are Baseline widely available now, meaning current versions of every major browser support them. The WebKit fallback mainly matters for users on older browser versions still in the support window, or for finer visual control (like a custom thumb border-radius) that the standard properties don't expose.
Why doesn't the live preview exactly match what I'll see in every browser?
The preview renders using the standard scrollbar-width/scrollbar-color properties, which Firefox and current Chromium-based browsers both support but may render with slightly different visual details (exact thumb shape, minimum thickness). The generated ::-webkit-scrollbar CSS gives you more precise control specifically for WebKit/Blink rendering if that consistency matters.