What Is the Scrollbar Styler?
Design custom scrollbars with visual controls for width, track color, thumb color, radius, and hover states. Generate cross-browser CSS.
Why Use This Tool?
Default browser scrollbars can clash with dark-themed or branded interfaces. This tool lets you design scrollbars visually and generates both the WebKit (Chrome/Safari/Edge) and standard (Firefox) CSS.
How to Use This Scrollbar Styler
- Choose a scrollbar width — Select thin, medium, or custom width for your scrollbar track and thumb.
- Pick your colors — Set the thumb color (the draggable part) and track color (the background channel). Match your site's design palette.
- Adjust the border radius — Round the scrollbar thumb for a modern look — fully rounded thumbs are a popular design trend.
- Preview the scrollbar — See your styled scrollbar on a live preview panel with scrollable content.
- Copy the CSS — Grab both the WebKit (Chrome/Safari/Edge) and Firefox scrollbar CSS. You'll need both for cross-browser support.
Tips and Best Practices
- → Use both scrollbar APIs. WebKit browsers use
::-webkit-scrollbar pseudo-elements. Firefox uses scrollbar-width and scrollbar-color. Include both, with the standard properties inside @supports not selector(::-webkit-scrollbar) so they do not override the WebKit rules in Chrome 121+ and Safari 26.2+.
- → Keep scrollbars visible on dark backgrounds. A dark thumb on a dark track becomes invisible. Ensure enough contrast between track and thumb colors.
- → Don't hide scrollbars entirely. Removing scrollbars with
scrollbar-width: none harms accessibility — users can't see that content is scrollable. Use thin scrollbars instead.
- → Style scrollbars on specific containers. Apply custom scrollbar styles to individual elements (like code blocks or chat panels) rather than globally to avoid unexpected behavior.
Frequently Asked Questions
Will custom scrollbars work in all browsers?
Yes, in every current desktop browser, through two systems. Chrome, Edge, Safari and Opera read the non-standard ::-webkit-scrollbar pseudo-elements (width, track and thumb colours, rounded corners, a hover colour). Firefox reads only the standard scrollbar-color and scrollbar-width properties: two colours and auto/thin/none. Chrome and Edge 121+ and Safari 26.2+ also understand the standard properties, and when those are set to anything but auto they override the ::-webkit-scrollbar rules (MDN). That is why this tool wraps the standard properties in @supports not selector(::-webkit-scrollbar): Firefox gets them, and the other browsers keep the fuller WebKit styling.
Should I hide scrollbars?
Only if there's another clear indication that content is scrollable (like a gradient fade or visible content cutoff). Hidden scrollbars can confuse users who rely on them for navigation.
Can I style scrollbars on specific elements?
Yes. You can scope scrollbar styles to specific containers using CSS selectors: .my-container::-webkit-scrollbar. This is useful for styling scroll areas within cards or sidebars without affecting the page scrollbar.
Can I style scrollbars with CSS?+
Yes. Chrome, Edge, Safari and Opera support the ::-webkit-scrollbar pseudo-elements for full customization; Firefox supports the standard scrollbar-color and scrollbar-width properties. Use both, but keep the standard properties away from WebKit/Blink browsers (for example inside @supports not selector(::-webkit-scrollbar)), because since Chrome 121 and Safari 26.2 a non-auto scrollbar-color or scrollbar-width overrides the ::-webkit-scrollbar styling.
Is it bad practice to hide scrollbars?+
Hiding scrollbars entirely removes a visual cue that content is scrollable, which hurts usability and accessibility. If you want a minimal look, use scrollbar-width: thin or style the scrollbar to blend subtly with your design rather than hiding it completely.
Do custom scrollbars work on mobile?+
Mobile browsers typically show their own overlay scrollbars that auto-hide, and CSS scrollbar styling has limited effect on touch devices. Custom scrollbar styles primarily impact desktop browsers.
Which CSS properties control scrollbar styling?+
In Chrome, Edge, Safari and Opera: ::-webkit-scrollbar (overall width and height), ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, plus -button and -corner. In Firefox: scrollbar-color (thumb colour, then track colour) and scrollbar-width (auto, thin or none); Chrome 121+ and Safari 26.2+ support these too and let them override the WebKit pseudo-elements. Browsers that support neither show their default scrollbar, so custom scrollbars are a progressive enhancement.
Are styled scrollbars indexed or ignored by screen readers?+
Custom scrollbar styling is purely visual — it changes the appearance of the scrollbar but not the underlying scroll behavior or the accessibility tree. Screen readers and keyboard users interact with the scroll behavior the same way they would with a default scrollbar, and search engines ignore scrollbar styling entirely. The accessibility risk is making the styled scrollbar too thin or too low-contrast to see, not the styling itself.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service