CSS scrollbar-color Property

Definition and Usage

The scrollbar-color property sets the color of a scrollbar’s thumb (the moving piece) and track (the background groove).

Apply it to a scrolling box — typically one with overflow: auto or scroll. On the root element (html) it styles the viewport scrollbar. The property is inherited. The initial value is auto.

CSS Syntax

Example: scrollbar-color: #2563eb #e2e8f0; — first color = thumb, second = track.

Property Values

Pick thumb and track colors with enough contrast (about 3:1) so the scrollbar stays easy to see.

How to Use scrollbar-color

Make a scrolling box, then set thumb and track colors on that box.

1. Create a scroll container with a fixed height and overflow: auto (or scroll).
2. Set scrollbar-color to two colors: thumb first, track second.
3. Optional: pair with scrollbar-width to thin the bar.
4. Check contrast, and remember overlay scrollbars (common on macOS) may hide the track until hover.

Live Preview

Scroll the box and switch scrollbar-color. You need enough content for a scrollbar to appear.

CSS Examples

Each snippet focuses on scrollbar-color. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  .box {
    height: 120px;
    overflow: auto;
    scrollbar-color: #2563eb #e2e8f0;
  }
</style>

<div class="box">
  <p>One</p><p>Two</p><p>Three</p>
  <p>Four</p><p>Five</p><p>Six</p>
</div>

<style>
  .box {
    height: 120px;
    overflow: auto;
    scrollbar-color: auto;
  }
</style>

<div class="box">
  <p>One</p><p>Two</p><p>Three</p>
  <p>Four</p><p>Five</p><p>Six</p>
</div>

<style>
  .box {
    height: 120px;
    overflow: auto;
    background: #0f172a;
    color: #e2e8f0;
    scrollbar-color: #94a3b8 #1e293b;
  }
</style>

<div class="box">
  <p>One</p><p>Two</p><p>Three</p>
  <p>Four</p><p>Five</p><p>Six</p>
</div>

Key Takeaways