🎨 CSS scrollbar-color — Complete Tutorial

The CSS scrollbar-color property allows you to style thethumb and track colors of a scrollbar — but only in Firefox. This is great for matching your UI theme, improving accessibility, or creating a more modern, minimal interface.

>>“With scrollbar-color, Firefox scrollbars become theme-aware and much more elegant.”

Note

✔ Firefox-only feature
✔ Controls scrollbar thumb & track
✔ Use alongside scrollbar-width for full styling

📦 Syntax

scrollbar-color syntax

scrollbar-color: <thumb-color> <track-color>;
ValueDescription
autoDefault system scrollbar colors
<color> <color>Custom thumb & track colors

🎨 1. Basic Example

Basic styling

.scroll-box {
  overflow-y: scroll;
  scrollbar-color: #555 #ccc; /* thumb | track */
}

A dark thumb on a light track — simple and readable.

🎨 2. Dark Mode Style

Dark mode

.dark-scroll {
  overflow: auto;
  scrollbar-color: #888 #222;
}

Perfect for dark-themed dashboards.

🎨 3. Transparent Track + Colored Thumb

Minimal scrollbar

.minimal {
  scrollbar-color: #3498db transparent;
}

🎨 4. Pair with scrollbar-width

thin styled scrollbar

.styled {
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a #e0e0e0;
}

📌 5. Applying to HTML or Body

Global scrollbar style

html {
  scrollbar-color: #666 #ddd;
  scrollbar-width: thin;
}

Styles scrollbars across the entire page (Firefox only).

🧪 Real-World Use Cases

1️⃣ Chat Apps

Chat scroll

.chat-window {
  scrollbar-color: #777 #2c2c2c;
}

2️⃣ Code Editors

Code editor

.editor {
  scrollbar-color: #444 #1a1a1a;
}

3️⃣ Minimal Dashboard Panels

Dashboard panel

.panel {
  scrollbar-color: #999 #f5f5f5;
}

📌 Cross-Browser Styling

Because scrollbar-color works only in Firefox, use WebKit scrollbars for Chrome/Edge/Safari:

WebKit scrollbar

.scroll-box::-webkit-scrollbar {
  width: 8px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background: #555;
}

.scroll-box::-webkit-scrollbar-track {
  background: #ccc;
}

Note

Combine Firefox + WebKit styling for full support.

⚠️ Common Mistakes

  • ❌ Expecting this property to work in Chrome or Safari
  • ❌ Forgetting to set overflow to create a scrollable box
  • ❌ Using overly low contrast colors, harming accessibility

Note

Always ensure the thumb color contrasts with the track for visibility.

🔥 Summary

scrollbar-color offers a simple way to theme scrollbars in Firefox. When combined with scrollbar-width and WebKit scrollbar styling, you can build modern, elegant, and accessible scrolling experiences across browsers.

>>“Custom scrollbars make your UI look polished and thoughtfully designed.”