CSS Scrollbar Styler
NewDesign a custom scrollbar with adjustable width, thumb color, track color, and corner radius, generating CSS for both WebKit/Blink and Firefox with a live preview.
Scroll down to see the custom scrollbar in action.
Line two of filler content.
Line three of filler content.
Line four of filler content.
Line five of filler content.
Line six of filler content.
Line seven of filler content.
Line eight of filler content.
Chrome, Edge, and Safari use the ::-webkit-scrollbar family of pseudo-elements, while Firefox uses the simpler scrollbar-width and scrollbar-color properties — this tool generates both so your custom scrollbar works consistently across browsers.
Frequently Asked Questions
Why does the generated CSS have two completely different sections?
Chrome, Edge, and Safari (all Chromium/WebKit-based) support the older `::-webkit-scrollbar` family of pseudo-elements for detailed styling, while Firefox instead implements the newer, simpler `scrollbar-width` and `scrollbar-color` standard properties — including both ensures your custom scrollbar looks consistent across browsers.
Why doesn't Firefox let me control the exact scrollbar width in pixels?
Firefox's `scrollbar-width` property only accepts `auto`, `thin`, or `none` — it doesn't support arbitrary pixel widths by design, so this tool sets it to `thin` and relies on the WebKit-specific width property for browsers that support pixel-precise sizing.
How do I apply the generated CSS to a specific scrollable element?
Add the `custom-scrollbar` class name used in the generated CSS to whichever container has `overflow: auto` or `overflow: scroll`, or rename the class in both the CSS and your HTML to match your project's naming convention.
Can I preview the scrollbar before copying the CSS?
Yes — the preview box above the generated CSS updates live as you adjust the width, radius, and colors, so you can scroll inside it and see exactly how your custom scrollbar will look and feel.
Will this affect the native OS scrollbar everywhere on the page?
No — the generated CSS is scoped to the `.custom-scrollbar` class, so only elements you explicitly apply that class to are affected; the rest of the page keeps its default browser scrollbar unless you apply the class more broadly.