Browse 25+ Tools

Scrollbar Customizer

Give your web app a premium feel. Design custom scrollbar tracks and thumbs, and we will generate the complex cross-browser CSS.

Scroll down to see the magic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

/* Generated on cssgen.org */

The Anatomy of a CSS Scrollbar

A default browser scrollbar often clashes with the aesthetic of a modern, carefully designed web application. By customizing the scrollbar, you can seamlessly integrate it into your site's color palette.

Styling scrollbars requires understanding the two main components: the Track (the background trough that the scrollbar sits in) and the Thumb (the actual draggable handle). Historically, this was only possible using ::-webkit- pseudo-elements. However, Firefox has now implemented the official W3C standard properties. Our generator automatically outputs both syntax formats to ensure maximum browser compatibility. You can read more about the new standards on MDN Web Docs.

🖱️

Pro Tips for UX & Accessibility

  • Contrast is Essential: Do not make your Thumb color too similar to your Track color. Visually impaired users rely on high contrast to locate and drag the scrollbar. Always ensure the Thumb stands out clearly.
  • Hover States: Just like a button, the scrollbar thumb is an interactive element. Providing a slightly darker or more saturated :hover state gives the user immediate visual feedback that they can interact with it.
  • Keep it Subtle: Unless you are building an incredibly stylized, retro, or brutalist website, keep your scrollbars thin (8px to 12px) and use neutral colors. A bright neon scrollbar can distract users from your actual content.
🔗

Support This Free Tool

If this tool saved you from hunting down webkit scrollbar documentation today, the best way to say thanks is by linking to us from your dev blog or repository. Just copy the snippet below!

<a href="https://cssgen.org/custom-scrollbar" target="_blank" rel="noopener noreferrer">CSS Custom Scrollbar Generator</a>

Frequently Asked Questions

How do I change the scrollbar color in CSS?

For Chrome, Safari, and Edge, you target the ::-webkit-scrollbar-thumb pseudo-element and change its background-color. For Firefox, you must use the newer CSS property: scrollbar-color: [thumb-color] [track-color];.

How can I hide the scrollbar but keep scrolling functionality?

To hide the visual scrollbar entirely while allowing users to still scroll with their mouse wheel or trackpad, apply ::-webkit-scrollbar { display: none; } for webkit browsers, and scrollbar-width: none; for Firefox.

Why isn't my border-radius working on the scrollbar?

In webkit browsers, you must apply the border-radius to both the ::-webkit-scrollbar-track and the ::-webkit-scrollbar-thumb independently. Also, note that Firefox currently does not support border-radius on scrollbars via standard CSS properties.

Refining Your UI

Custom scrollbars look best when they match the overall aesthetic of your site. If your brand leans into soft, rounded corners, consider using our Fancy Border Radius Builder to create fluid shapes that complement your new scrollbar design.