Default browser scrollbars look fine on a plain document, but they can clash badly with a carefully designed dark-mode UI or branded product interface. Styling them correctly means juggling two completely different CSS APIs — one for Chromium-based browsers, one for Firefox — and remembering the exact pseudo-element and property names is easy to get wrong.
What Is the CSS Scrollbar Styler?
Adjust sliders for scrollbar width and thumb border radius, pick thumb and track colors, and watch a live preview box update instantly — then copy out CSS that correctly targets both the WebKit ::-webkit-scrollbar pseudo-elements and Firefox’s scrollbar-width/scrollbar-color properties.
How to Use It
- Open the tool at /tools/css-scrollbar-styler.
- Adjust the width and border-radius sliders.
- Pick your thumb and track colors.
- Scroll inside the live preview box to see your custom scrollbar in action.
- Copy the generated CSS and apply the
custom-scrollbarclass to your scrollable element.
Key Features
- Cross-browser CSS generation covering both WebKit/Blink and Firefox scrollbar styling APIs.
- Live, scrollable preview that updates instantly as you adjust any setting.
- Full color control for both the scrollbar thumb and track.
- Adjustable thumb border radius for a rounded or sharp-edged look.
When to Use This Tool
- Matching a custom scrollbar to your brand colors or dark-mode theme.
- Building a polished, custom-feeling scrollable panel or sidebar.
- Learning the exact CSS properties needed for cross-browser scrollbar styling.
Try It Now
Open CSS Scrollbar Styler directly, or press ⌘K and type the tool name from anywhere on the site.
Part of the CSS Tools collection on WebdevToolbox — free, browser-based developer tools with no login required.