Customize the color or thickness of a scrollbar

You can customize the appearance of scrollbars using the standard CSS properties scrollbar-color and scrollbar-width.

• scrollbar-color: Accepts two <color> values. The first applies to the thumb (the moving part), and the second to the track (the fixed background).
• scrollbar-width: Accepts auto (default), thin (a thinner variant), or none (hides the scrollbar completely while maintaining scrollability).

Apply scrollbar-color and scrollbar-width

MANDATORY: Use scrollbar-color and scrollbar-width on the scrollable container.

When using scrollbar-color, use CSS variables to keep thumb and track colors separate, for readability and maintainability (especially when using fallbacks).

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

Fallback strategies

Fallbacks & browser support for scrollbar-color

This feature is progressive enhancement and does not always require fallbacks.

If the styling is important and the user's Baseline target is "Baseline Widely Available" or earlier, you SHOULD include the non-standard ::-webkit-scrollbar pseudo-elements as fallbacks.

Wrap legacy fallbacks in an @supports not (scrollbar-color: auto) block to prevent conflicts between standard properties and legacy WebKit selectors in browsers that support both natively.

If you are using custom properties to define colors, these will cascade to the legacy WebKit selectors automatically. You do NOT need to duplicate them.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}