CSS Scrollbar Generator
Style custom scrollbars online for free — set width, colors and radius with a live preview. Outputs WebKit and Firefox CSS. Runs entirely in your browser.
100% private — runs entirely in your browser. Your files never leave your device.
Scroll this box to preview your custom scrollbar.
WebKit browsers (Chrome, Edge, Safari) use the ::-webkit-scrollbar pseudo-elements.
Firefox uses the standard scrollbar-width and scrollbar-color properties, also included in the output.
Keep the thumb and track colors distinct enough to stay usable and accessible.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
Custom scrollbars use WebKit pseudo-elements plus the standard scrollbar-width /
scrollbar-color for Firefox — both are in the output. Runs entirely in your browser.
How to use the CSS Scrollbar Generator
- Set the scrollbar width, colors and radius.
- Scroll the preview box to see it.
- Copy the WebKit and Firefox CSS.
What you can use it for
- Style custom scrollbars to match your brand
- Support Chrome, Edge, Safari and Firefox
- Style a single scrollable container
- Improve the look of long panels
More free tools
Styling a website?
Generate shadows, gradients, layouts and effects with our free CSS tools — copy the code and go.
Frequently asked questions
Which browsers are covered?
WebKit browsers (Chrome, Edge, Safari) via ::-webkit-scrollbar, plus Firefox via scrollbar-width and scrollbar-color — both are in the output.
Can I style just one element's scrollbar?
Yes — apply the rules to a specific class so only that scrollable container is affected.
Any accessibility tips?
Keep the thumb and track colors distinct and the thumb wide enough to grab easily.
Is my data uploaded?
No — everything runs in your browser.