Scrollbar Generator

Style scrollbars with width, radius, track and thumb colours. Covers both the webkit and Firefox syntax. Live preview.

Tool

UI Elements/Scrollbar

Scrollable line 1 - scroll to see the styled bar.

Scrollable line 2 - scroll to see the styled bar.

Scrollable line 3 - scroll to see the styled bar.

Scrollable line 4 - scroll to see the styled bar.

Scrollable line 5 - scroll to see the styled bar.

Scrollable line 6 - scroll to see the styled bar.

Scrollable line 7 - scroll to see the styled bar.

Scrollable line 8 - scroll to see the styled bar.

Scrollable line 9 - scroll to see the styled bar.

Scrollable line 10 - scroll to see the styled bar.

Scrollable line 11 - scroll to see the styled bar.

Scrollable line 12 - scroll to see the styled bar.

Scrollable line 13 - scroll to see the styled bar.

Scrollable line 14 - scroll to see the styled bar.

Scrollable line 15 - scroll to see the styled bar.

Scrollable line 16 - scroll to see the styled bar.

Scrollable line 17 - scroll to see the styled bar.

Scrollable line 18 - scroll to see the styled bar.

Scrollable line 19 - scroll to see the styled bar.

Scrollable line 20 - scroll to see the styled bar.

Widthpx

Radiuspx

Track

Thumb

Hover

/* Chromium / Safari */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #12151d; border-radius: 999px; }
::-webkit-scrollbar-thumb { background: #6d5efc; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #8b7dff; }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #6d5efc #12151d; }

About the scrollbar generator

A default scrollbar can look out of place inside a dark interface. Styling it takes two different syntaxes: the ::-webkit-scrollbar pseudo-elements for Chromium and Safari, and the scrollbar-width and scrollbar-color properties for Firefox.

The generator exports both, since neither covers every browser on its own.

How to use it

1Set the width. Six to ten pixels reads as slim without being hard to grab.
2Set the radius, usually fully rounded.
3Pick track, thumb and hover colours.
4Scroll the preview to see it in place.
5Copy the CSS.

Worth knowing

Do not make the thumb so faint that people cannot find it. Slim is fine, invisible is not.

Questions

Why are there two different syntaxes?

Chromium and Safari use the non-standard ::-webkit-scrollbar pseudo-elements. Firefox implements the standard scrollbar-width and scrollbar-color properties. You need both for full coverage.

Can I style the scrollbar on one element only?

Yes. Prefix the rules with a class instead of applying them globally, which is what the exported CSS shows.

Should I hide scrollbars completely?

Rarely. Hiding them removes the only cue that a region scrolls. If you must, keep another affordance such as a fade at the edge.