CSS scrollbar-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The scrollbar-color CSS property controls the colors used to paint the browser’s scrollbars for elements that are rendered with stylable scrollbars. It affects the visible parts of a scrollbar such as the draggable thumb and the track it moves in, allowing the scrollbar to be visually aligned with the surrounding UI or page theme. Because it targets the scrollbar as a UI component, it’s useful when you want scroll controls to feel like a coherent part of your design rather than an unstyled system element.

In practical use, scrollbar-color is often applied to match scrollbars to a brand palette, to create subtle or high‑contrast scroll indicators, or to make scrollbars more visible on complex backgrounds. When designing with it, consider how the chosen colors interact with the content beneath the track, and how the thumb color reads against the track — contrast and clarity are important for usability. It can be combined with dynamic design techniques (for example using CSS custom properties) so scrollbar colors respond to theme changes or user interactions without needing additional markup.

The property interacts with other layout and UI-related properties and system behaviors. For example, thickness and layout implications of scrollbars are influenced by scrollbar-width, and the perceived result depends on the page and element backgrounds, which you control with background-color. Additionally, user agent and system-level settings — including color schemes and accessibility modes — can override or alter the final rendering; authors should consider the page’s color-handling intent (for example via color-scheme) and provide designs that remain usable when platform styles take precedence.

As a guideline, use scrollbar-color to enhance clarity and cohesion of scrollable interfaces, but test across different themes and user settings to ensure legibility and accessibility. If the platform or user settings block custom styling of scrollbars, fall back to designs that remain functional with default scrollbars so content remains easily navigable.

Definition

Initial value: auto
Applies to: scrolling boxes
Inherited: yes
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.scrollbarColor

Syntax

scrollbar-color: auto | <color>{2}

Values

autoDefault platform rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties.
<color>{2}Applies the first color to the scrollbar thumb, the second to the scrollbar track.

Example

HTML

<div class="container">

  <h2>Example: scrollbar-color</h2>

  <p>Scrollbar color is supported in Firefox. This example also includes WebKit rules for other browsers.</p>

  <div class="scroll-box" tabindex="0">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>

    <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>

    <p>Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>

    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

    <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>

  </div>

</div>

CSS

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f7f8fa;
  padding: 32px;
  color: #111;
}

.container {
  max-width: 640px;
  margin: 0 auto;
}

.scroll-box {
  height: 200px;
  overflow: auto;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e6e9ee;
  border-radius: 8px;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #ff6b6b #f1f1f1;
}

/* WebKit-based browsers (Chrome, Edge, Safari) */
.scroll-box::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scroll-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background-color: #ff6b6b;
  border-radius: 8px;
  border: 2px solid #f1f1f1;
}

.scroll-box::-webkit-scrollbar-thumb:hover {
  background-color: #ff5252;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS scrollbar-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.