CSS Scrollbar Styler
Generate scrollbar styling using both the standard scrollbar-color and scrollbar-width properties and the WebKit pseudo-elements, with a contrast check on the thumb.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Two mechanisms, both needed
Scrollbar styling has a standard form, scrollbar-color and scrollbar-width, and an older WebKit specific form using pseudo-elements. The standard properties are simple and limited: a thumb colour, a track colour, and a choice of auto, thin or none. The pseudo-elements allow arbitrary styling including rounded corners, borders and hover states, and only work in WebKit and Blink browsers. Writing both covers everything, and writing only one leaves a browser with the default.
A scrollbar is a control, so contrast applies
The thumb is an interface component, which means it needs 3:1 contrast against the track to meet the requirement. A pale grey thumb on a white track looks refined and fails, and the result is a scrollbar people cannot see well enough to grab. Thin scrollbars compound this by reducing the target size, and a thin low contrast scrollbar is effectively invisible.
Hiding a scrollbar hides the information that content continues
Setting scrollbar-width to none removes the clearest signal that an area scrolls. In a carousel where the next item peeks in, that signal exists elsewhere and hiding is defensible. In a scrolling panel with a clean edge, nothing indicates there is more, and people simply do not find it. The scrolling still works for anyone who tries; the problem is that they do not know to try.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why do I need both syntaxes?
Because the standard properties are supported in Firefox and now widely elsewhere, while the pseudo-elements only work in WebKit and Blink browsers and allow much more detailed styling. Writing both means every browser gets something.
Does a scrollbar need to meet contrast requirements?
Yes. The thumb is an interface component, so it needs 3:1 against the track. A pale thumb on a white track looks refined and leaves people unable to see what to grab, which is worse when the scrollbar is also thin.
Should I hide scrollbars?
Only where another signal shows the area scrolls, such as a partially visible next item. On a panel with a clean edge, hiding the scrollbar means people do not discover the content, since nothing tells them to try scrolling.
What width should a scrollbar be?
The default, unless there is a reason. Thin reduces the target size, which matters for anyone with limited fine motor control, and the benefit is purely visual. If you do use thin, raise the contrast to compensate.
Can I style the scrollbar differently in dark mode?
Yes, and you should. Declare the colours as custom properties and change them in your dark theme block, since a thumb chosen for a white track disappears against a dark one.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose your colours and width to generate cross-browser scrollbar CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.