CSS Scrollbar Styler
Style scrollbars with thumb, track, size, and radius controls.
Custom scrollbars
Default scrollbars can clash with a carefully designed interface, especially in dark themes. This styler generates scrollbar CSS — thumb, track, width, and radius — so scrollable areas match your design in browsers that support it.
Scrollbar styling relies on non-standard pseudo-elements, so a ready recipe saves the lookup. Tune the size and colors, copy the CSS, and remember to keep enough contrast that the scrollbar stays usable and visible.
Copy-ready scrollbar CSS
Custom scrollbars use ::-webkit-scrollbar in Chrome and Safari plus scrollbar-color in Firefox, and the output covers both. Generated locally in your browser.
Frequently asked questions
Why do my custom width and radius not show in Chrome?
Chrome and Edge 121+ support the standard scrollbar-width and scrollbar-color properties, and once either is set they ignore the ::-webkit-scrollbar rules. Remove the first line if you need the custom width in Chromium.
Which browsers use the standard properties?
Firefox and Chromium browsers use scrollbar-width and scrollbar-color. The ::-webkit-scrollbar rules are what Safari relies on.
Are thin custom scrollbars a usability problem?
They can be. Very thin or low-contrast thumbs are hard to grab, especially for people with limited dexterity, so keep enough contrast between thumb and track.
Related tools
Practical utilities for front-end design and implementation work.