Scrollbar Styler
Choose thin or standard width, a thumb and track colour and, for the prefixed version, the exact width and roundness. Scroll the panel to try it.
The standard properties set the colours and one of two widths. The prefixed pseudo-elements give full control of width and shape, but only some browsers read them. The preview uses whichever your browser understands, so a method it does not support will show its normal scrollbar. The box height and padding in the preview are not part of the CSS.
About Scrollbar Styler
The default scrollbar often clashes with a custom design, especially a dark one. CSS can restyle it in two ways, and they work differently. The standard properties are short but limited to colour and a choice of widths. The older prefixed pseudo-elements allow full control of the width, shape and hover colour, but are not part of the standard.
Choose a method, set the colours, and scroll the preview panel to try it. For the prefixed method you can set the exact width and roundness. A third option writes the standard version first and wraps the prefixed rules in a block that applies only to browsers that do not understand the standard properties, so each browser gets one method.
How to use Scrollbar Styler
- Choose the standard, prefixed or combined method.
- Set the thumb and track colours.
- For prefixed bars, set the width, roundness and hover colour.
- Scroll the preview, then copy the CSS.
Common uses
- Matching scrollbars to a dark theme
- Making a thin scrollbar for a sidebar or code box
- Hiding the bar on a carousel while keeping it scrollable
- Testing which method a browser supports
Frequently asked questions
Why does my browser not show the effect?
The preview uses whichever method your browser understands. A browser that does not read the prefixed rules shows its normal bar in that mode, and the reverse is true for the standard properties.
What does the combined option do?
It writes scrollbar-width and scrollbar-color first, then the prefixed rules inside an @supports not block. Browsers that understand the standard use it, and others fall back to the prefixed rules.
Is it a good idea to hide scrollbars?
Rarely. A scrollbar tells people that more content exists and how far through it they are. Hide it only when another clear cue, such as arrows, takes its place.
What colours should I use?
Keep the thumb clearly different from the track, at least 3 to 1 in contrast, so the bar is easy to find and drag.