CSS scrollbar styler — custom scrollbar colours with a WebKit fallback

How to use the CSS scrollbar styler

1. Set the Width from 4 to 24 px.
2. Choose colours for the Track, the Thumb and the Thumb on hover.
3. Set Thumb radius for rounded ends and Gap around thumb to leave a border of track colour around it.
4. Scroll the preview box, both down and sideways, to try the result.
5. Copy the CSS and add class="scroll" to your scrolling element.

What it does and when to use it

Custom scrollbars help when a default grey bar clashes with a dark theme, or when a small scrolling panel, such as a chat list, code block or sidebar, needs a slimmer bar that fits the design. They are a finishing touch, so keep them close to what users expect: a clear thumb on a quieter track.

If you are picking colours for a dark theme, check that the thumb stands out from the track with the contrast checker. For text inside long panels, the line clamp generator can shorten previews so fewer areas need to scroll, and the CSS variables generator can hold the colours as theme tokens.

How it works

The output has two blocks. The standard block sets scrollbar-width (thin or auto) and scrollbar-color: <thumb> <track>. The WebKit block sets the exact width and height, the track background, and the thumb’s colour, radius and hover colour. The gap is drawn as a border on the thumb in the track colour, which makes the thumb look inset.

MDN lists scrollbar-width as Baseline newly available since December 2024 and scrollbar-color as newly available since December 2025, which means they may not work in older browsers. It marks ::-webkit-scrollbar as non-standard. That is why both blocks are included.

Worked examples

The default light scrollbar gives

.scroll {
  scrollbar-width: auto;
  scrollbar-color: #94a3b8 #f1f5f9;
}

followed by a 12px WebKit scrollbar with an 8px thumb radius and a 3px track-coloured border.

A thin dark-theme bar. Width 6 px, track #0f172a, thumb #38bdf8, hover #7dd3fc, radius 3 px, gap 0. Because 6 is 8 or less, the standard rule becomes scrollbar-width: thin;, and the WebKit rule uses width: 6px;.

Limits and tips

• Expect slightly different results per browser. The standard properties give the browser room to draw its own shape; only colours and the thin/auto choice are yours.
• Very thin bars are hard to grab with a mouse, especially for people with tremors. Keep the default width for main page areas.
• Hover colours only appear with the WebKit rules, as explained above.