CSS Scrollbar Styler
The CSS Scrollbar Styler generates custom scrollbar CSS for both WebKit browsers (Chrome, Edge, Safari) and Firefox, letting you control thumb color, track color, width, border-radius, and hover states. It is built for frontend developers and designers who want styled scrollbars without hunting down cross-browser syntax every time.
Configuration
Target
Dimensions
Colors
Firefox
Layout
Content
How to Use
1. Configure your scrollbar dimensions by setting the width, border-radius, and which element to target (body, a custom selector, or a specific class). 2. Adjust colors for the thumb, track, and hover state using the color pickers, then choose whether to show or hide the scrollbar on the X or Y axis. 3. Preview the live result in the output panel, which renders a real scrollable container styled with your exact settings. 4. Copy the generated CSS snippet or the full Bootstrap 5 HTML demo block to paste directly into your project.
Why Use This Tool?
Writing cross-browser scrollbar CSS from scratch means maintaining two separate syntaxes, one for WebKit and one for Firefox, which is easy to get wrong and tedious to update. This tool outputs both dialects simultaneously, saving 10 to 20 minutes per implementation and eliminating lookup errors. There are no npm packages, no polyfills, and no JavaScript required — just plain CSS you can drop into any project.