Standard

CSS Scrollbar Styler

Design a custom scrollbar and preview it live, right here on the page.

Scroll me! This box has enough content to show a scrollbar, so you can see exactly how your styling looks in practice as you adjust the controls below. Keep scrolling to see more filler text demonstrating the effect.

More content here to make sure the scrollbar stays visible throughout testing.

Advertisement

About this tool

Includes both the ::-webkit-scrollbar rules (Chrome, Edge, Safari) and the standard scrollbar-color/scrollbar-width properties (Firefox) — apply the class to any scrollable container.

Since version 121, Chrome and Edge also support the standard properties, and when an element has scrollbar-color or scrollbar-width they ignore all the ::-webkit-scrollbar rules, so your width and rounded corners would silently disappear. The generated CSS avoids that by giving the standard properties only to browsers without ::-webkit-scrollbar support (Firefox). Keep scrollbars wide enough to grab, and with enough contrast against the track, for people using a mouse with limited precision.

Related tools

CSS Custom Properties Generator CSS Logical Properties Converter CSS Clip-Path Generator Unused CSS Selector Finder CSS Counter Generator CSS Loader/Spinner Generator