CSS scrollbar-color Property

What You’ll Learn

The scrollbar-color property lets you customize scrollbar thumb and track colors on scrollable elements for a more polished, on-brand look.

Introduction

The scrollbar-color property in CSS is a convenient way to customize the color of scrollbars in a web page.

It lets you specify the thumb and track colors, which helps scrollable areas feel more consistent with your site branding and overall design.

Definition and Usage

Apply scrollbar-color to elements that scroll — such as a content panel, sidebar, or card with overflow: auto or overflow: scroll.

The first color value styles the thumb. The second color value styles the track behind it.

📝 Syntax

The syntax for the scrollbar-color property is simple. You specify two colors: one for the thumb and one for the track.

element {
  scrollbar-color: thumb-color track-color;
}

• thumb-color — the color of the scrollbar thumb
• track-color — the color of the scrollbar track

Basic Example

.content-panel {
  overflow: auto;
  scrollbar-color: blue lightgray;
}

Related Properties

• scrollbar-width — changes scrollbar thickness
• overflow — makes an element scrollable
• accent-color — themes native form controls

🎯 Default Value

The default value of the scrollbar-color property is auto, which means the browser and operating system choose the scrollbar colors.

💎 Property Values

When to Use scrollbar-color

scrollbar-color helps when scrollable areas should match your design system:

• Content panels — Style scrollbars inside cards, modals, and docs sidebars.
• Dashboard layouts — Keep scrollable widgets visually consistent with brand colors.
• Dark mode themes — Use darker thumb and track colors in night-themed layouts.
• Simple theming — Avoid long WebKit pseudo-element rules when standard colors are enough.

Use it on the scrolling element itself. For more advanced styling in unsupported browsers, you may still need ::-webkit-scrollbar rules.

Examples Gallery

Start with the reference blue and light gray scrollbar, try brand hex colors, then explore dark theme and thin scrollbar styling.

<style>
  div {
    width: 300px;
    height: 150px;
    overflow: auto;
    scrollbar-color: blue lightgray;
  }
</style>

<div>
  <p>Long scrollable content goes here...</p>
</div>

.notes-panel {
  overflow: auto;
  scrollbar-color: #7c3aed #ede9fe;
}

.dark-sidebar {
  overflow-y: auto;
  scrollbar-color: #94a3b8 #1e293b;
}

.compact-panel {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #059669 #ecfdf5;
}

scrollbar-color in the family

scrollbar-color styles the thumb and track on scrollable elements. Pair it with scrollbar-width when you also want a thinner or hidden scrollbar, and use overflow: auto or overflow: scroll so the element can actually scroll.

.scroll-panel {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #2563eb #e2e8f0;
}

💡 Best Practices