Skip to main content
1

CSS Scrollbar Styler

Design custom scrollbars visually — width, track and thumb colours, hover state and radius — then copy WebKit and Firefox CSS.

Track radius (optional)

The ::-webkit-scrollbar pseudo-elements style the scrollbar in Chrome, Edge, and Safari. Firefox does not support them and instead uses the scrollbar-width / scrollbar-color fallback included in the output.

Preview (scroll the box)

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Scrollbar Styler

  1. Set the scrollbar width and the track, thumb, and thumb-hover colours.
  2. Choose a thumb border-radius and optionally round the track.
  3. Scroll the live preview box to check the look in a WebKit browser.
  4. Click Copy CSS to copy both the WebKit and Firefox rules.

What is Scrollbar Styler?

This tool builds the CSS for a custom scrollbar from simple visual controls. Set the scrollbar width, the track and thumb colours, a thumb hover colour, the thumb's border-radius, and an optional rounded track. A scrollable preview box updates live so you can see the result before copying.

The output includes both the WebKit pseudo-element block (::-webkit-scrollbar and its track, thumb, and thumb-hover parts) used by Chrome, Edge, and Safari, and a scrollbar-width / scrollbar-color fallback that Firefox understands. Everything runs in your browser.

Advertisement

FAQ

Why doesn't the preview look styled in Firefox?
Firefox does not support the WebKit ::-webkit-scrollbar pseudo-elements. It instead uses the scrollbar-width and scrollbar-color fallback, which only allows a thin or auto width and a thumb/track colour pair — both of which are included in the copied CSS.
How do I apply the copied CSS to a specific element?
The output targets a .scrollbox class. Add that class to the scrollable element you want to style, or replace .scrollbox with your own selector before pasting it into your stylesheet.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He's contributed to open-source developer tools and built CI/CD pipelines for startups.

← Back to Developer Tools · All tags

Last updated:

Advertisement