Overview
A dual-engine scrollbar stylist. Pick thumb and track colors and a bar width, and the tool emits both the WebKit pseudo-element rules used by Chromium and Safari and the standard scrollbar-width and scrollbar-color properties that Firefox honours, in one block. A live scroll container styled with the standard properties lets you test the result immediately.
How It Works
Choose the thumb color and track color with the pickers, and drag the width slider from 4 to 20 pixels. The preview panel is a real scrollable container you can drag to inspect the thumb and track. Copy CSS emits a commented block: the ::-webkit-scrollbar set covering width, height, track, thumb and a brightness-boosted thumb hover, followed by the Firefox path using scrollbar-width: thin and the two scrollbar-color values.
Step-by-Step Usage Guide
- Pick the thumb and track colors.
- Set the scrollbar width from 4 to 20 pixels.
- Scroll the preview container to check the styling.
- Copy the combined WebKit and Firefox CSS block.
Technical Specifications & Standards
Scrollbar styling is split across two incompatible systems. The ::-webkit-scrollbar pseudo-elements are a non-standard WebKit invention that Chromium and Safari support and Firefox never did; MDN marks them non-standard and recommends the standard properties as the alternative. Those standard properties, scrollbar-color and scrollbar-width from the CSS Scrollbars Styling module, are coarser: scrollbar-color takes exactly a thumb and track color, and scrollbar-width accepts only auto, thin and none rather than a pixel width. Order matters when both ship together: in engines that understand the standard properties, setting scrollbar-color or scrollbar-width to a non-auto value takes precedence over the WebKit pseudo-element rules, which is why this output deliberately applies scrollbar-color only through the universal selector alongside the WebKit block. The hover effect is a filter: brightness bump on the thumb rather than a separate color rule, keeping one source of truth for the hue.
Targeted Use Cases
- Dark-themed dashboards where the default light scrollbar glares.
- Matching scrollbar colors to a brand palette across browsers.
- Slimming chunky scrollbars in dense panels and code views.
- Providing Firefox-compatible styling without duplicating maintenance.
Notes & Gotchas
- Keep enough contrast between thumb and track for the scrollbar to stay visible.
- Remember Firefox only offers thin, not a pixel width; the width slider affects WebKit engines only.
- Test with both engines after pasting, since the standard properties override the WebKit rules where both are supported.
- Leave scrollbars alone on content-heavy reading surfaces if users rely on their native size.
Frequently Asked Questions
Why are there two different blocks in the output?
Browsers split into two systems: Chromium and Safari style scrollbars with the non-standard ::-webkit-scrollbar pseudo-elements, while Firefox ignores those and reads the standard scrollbar-color and scrollbar-width properties. The tool emits both so one paste covers every engine.
Does the width slider affect Firefox?
No. Firefox accepts only auto, thin or none for scrollbar-width, so the tool hardcodes thin there. The 4 to 20 pixel width applies to the WebKit ::-webkit-scrollbar rules.
Which styling wins when both systems are present?
In engines that support the standard properties, a non-auto scrollbar-color or scrollbar-width takes precedence over the WebKit pseudo-element rules. That is why the emitted Firefox lines matter even in Chromium-based browsers.
Is the corner radius configurable?
The generated rules fix the radius at 8 pixels for the track and thumb. There is no slider for it in the current interface; edit the border-radius values after copying.