About custom scrollbars
This tool generates CSS to style a scrollbar — its width, track and thumb colours and roundness — with a live preview. The output covers WebKit browsers (Chrome, Edge, Safari) and the standard properties used by Firefox. It runs in your browser.
How CSS Scrollbar works
How to use it
- Set the width, colours and corner radius.
- Scroll the preview box to see the result.
- Copy the CSS into your stylesheet.
How it works
WebKit browsers style scrollbars with the ::-webkit-scrollbar pseudo-elements, while Firefox uses the standard scrollbar-width and scrollbar-color properties. The tool outputs both so your scrollbar looks consistent across browsers.
Common uses
- Style a website scrollbar
- Match a scrollbar to your theme
- Make a thin scrollbar
- Customise a scrollable panel
- Round the scrollbar thumb
- Brand your UI
- Improve a dark-mode scrollbar
- Learn scrollbar CSS
Frequently asked questions
How do I style a scrollbar?
Set the options and copy the generated CSS into your stylesheet.
Does it work in Firefox?
Yes — it includes the standard scrollbar-width and scrollbar-color.
Does it work in Chrome and Safari?
Yes — via the ::-webkit-scrollbar rules.
Can I make it thinner?
Yes — set a small width (8px or less uses thin in Firefox).
Is my input uploaded?
No — it runs in your browser.
Can I round the thumb?
Yes — set the corner radius.
Is it free?
Yes — completely free with no sign-up.