CSS Scrollbar Designer
Style scrollbars with cross-browser CSS: WebKit's ::-webkit-scrollbar pseudo-elements plus the standard scrollbar-color / scrollbar-width for Firefox and modern browsers. Live preview on a real scrollable container.
Scrollable container. Style applies live below.
Line — sample content to make this overflow.
How to use the CSS Scrollbar Designer
Adjust width, colors, and radius. Scroll inside the preview container to see your styling applied. The output includes both modern scrollbar-color / scrollbar-width (Firefox + modern browsers) and the WebKit pseudo-elements (Chrome, Safari, Edge) for full coverage.
Cross-browser scrollbar styling
Styling scrollbars is awkward because two completely different mechanisms exist. WebKit browsers (Chrome, Safari, Edge) use the ::-webkit-scrollbar pseudo-elements, which give fine control over the track, thumb, and hover state. Firefox and the CSS standard instead use scrollbar-width and scrollbar-color, which are simpler but less granular. Cover only one and the other browser family falls back to its default bar.
Set width, colors, and radius here and the output emits both syntaxes together for full coverage, with a live preview on a real scrollable box. This focuses on a single styled container; the sibling scrollbar styler is an alternative take on the same job, and the overflow tester helps you decide when a scrollbar should appear at all.
Common use cases
- Themed scrollbars — match the bar to a dark or branded UI.
- Slim bars — reduce a chunky default scrollbar in a sidebar.
- Code and chat panels — style overflow areas to fit the surrounding design.
- Cross-browser parity — ship both WebKit and Firefox syntax at once.
- Custom thumb hover — give the scroll thumb a clear hover color.