CSS Scrollbar Styler

Scrollbars are one of the last parts of a page that still look like the operating system by default, and designers often want them to match a dark theme or to stay out of the way. Two different mechanisms exist, one old and flexible, one new and limited, and they interact in ways that surprise people. This generator writes rules for both so that the bar looks right in all current browsers, and lets you scroll a preview to try them.

Two systems

Chrome, Edge, Safari and Opera use WebKit pseudo-elements. ::-webkit-scrollbar sets the bar’s width, ::-webkit-scrollbar-track styles the groove, ::-webkit-scrollbar-thumb styles the part you drag, and the thumb can have a :hover state. You can set any colour, radius or border. Firefox ignores all of those and supports two standard properties: scrollbar-width, which accepts auto, thin or none, and scrollbar-color, which takes a thumb colour and a track colour. Chromium now supports the standard pair too, and when it finds them it ignores the WebKit rules, so setting both naively loses the custom shape.

A worked example

Press Sample for a 12 pixel bar with a pale track #f1f5f9, a slate thumb #94a3b8 that darkens to #64748b on hover, an 8 pixel radius and a 2 pixel gap. The page writes .scroll::-webkit-scrollbar { width: 12px; height: 12px; }, then rules for the track with background: #f1f5f9; and for the thumb with background: #94a3b8;, border-radius: 8px; and border: 2px solid #f1f5f9;. The border in the track colour is how the thumb gets its gap, because the thumb’s background is drawn under its border. The hover rule follows, and then @supports not selector(::-webkit-scrollbar) wraps scrollbar-width: auto; and scrollbar-color: #94a3b8 #f1f5f9;, which only Firefox will use.

The settings

Bar width applies to both vertical and horizontal bars. A width of 10 pixels or less is written as scrollbar-width: thin for Firefox; above that it is auto, because Firefox offers only those two sizes. The selector field defaults to .scroll, so you can aim the rules at your own container class, or at html for the page scrollbar. Colours can be typed or picked, and the radius rounds both the track and the thumb.

Usability

A scrollbar is a control as well as a decoration. Keep the thumb contrast against the track clear, at least the 3 to 1 ratio WCAG asks of interface components, and keep it wide enough to grab; on touch devices overlay scrollbars appear briefly and ignore most styling anyway. Do not hide the bar on content where people would not otherwise know that it scrolls, such as a table that is wider than its box.

Edge cases

The WebKit rules apply to each element that scrolls, so a style on .scroll does not affect an inner scrolling element. On macOS with overlay scrollbars the bar is hidden until you scroll, and custom sizes may not show. A scrollbar-gutter: stable rule on the container keeps layout from shifting when the bar appears. Forced colours (high contrast) mode overrides custom scrollbar colours for accessibility, which is correct behaviour.

Limits

Firefox cannot show custom shapes, rounded thumbs or hover colours. The generator does not set scrollbar-gutter or write rules for the corner where two bars meet. The preview shows how the bar looks in your current browser only. Everything runs locally.

Related tools

• CSS Gradient Generator can fill thumb and track with gradients.
• Box Shadow Generator adds depth to the scrolling panel.
• Contrast Checker tests that the thumb stands out from the track.
• Flexbox Generator lays out panels that scroll.