scrollbar-color

scrollbar-color requests colors for a native scrollbar’s thumb and track. The operating system and browser may affect whether scrollbars are visible and how they are painted.

Request a dark thumb on a pale track

Scroll the labeled region to reveal its scrollbar. On an overlay-scrollbar system, the track may be hidden or transient.

<div
  class="viewport"
  tabindex="0"
  role="region"
  aria-label="Scrollable practice notes"
>
  <p>First practice note.</p>
  <p>Read the example source.</p>
  <p>Change one value.</p>
  <p>Observe the result.</p>
  <p>Check narrow layouts.</p>
  <p>Compare with the original.</p>
  <p>Last practice note.</p>
</div>

.viewport {
  max-height: 140px;
  overflow: auto;
  border: 1px solid #94a3b8;
  padding: 0.75rem;
}
.viewport:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}
.viewport {
  scrollbar-color: #1d4ed8 #eff6ff;
}

Use platform colors instead

Auto restores native color selection. The same content and keyboard scrolling remain available; styling is optional.

<div
  class="viewport"
  tabindex="0"
  role="region"
  aria-label="Scrollable practice notes"
>
  <p>First practice note.</p>
  <p>Read the example source.</p>
  <p>Change one value.</p>
  <p>Observe the result.</p>
  <p>Check narrow layouts.</p>
  <p>Compare with the original.</p>
  <p>Last practice note.</p>
</div>

.viewport {
  max-height: 140px;
  overflow: auto;
  border: 1px solid #94a3b8;
  padding: 0.75rem;
}
.viewport:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}
.viewport {
  scrollbar-color: auto;
}

Values and defaults

The initial value is auto and the property is inherited. Two colors mean thumb first, track second. A single color is not the two-color syntax. On the root element, the value applies to viewport scrollbars. Forced-colors mode sets the property to auto so user-selected colors can remain effective.

Common mistakes

Support is no longer accurately described as Firefox-only; inspect current engine/version rows. Color styling does not create overflow. Low contrast can hide a thumb, and an overlay platform may make the comparison subtle. Keep native scroll interaction instead of adding a JavaScript replacement solely for cosmetic consistency.

Learn scrollbar-width, scrollbar-gutter, and overflow.

Sources and browser support

MDN: scrollbar-color describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.