CSS scrollbar-color Property

The scrollbar-color property allows you to customize the colors of the scrollbar thumb and the track background.

selector { scrollbar-color: auto | <color> <color>; }
auto The browser determines the scrollbar colors based on the platform default.
<color> <color> Sets two specific colors where the first is for the scrollbar thumb and the second is for the track.

Code Examples

A basic example showing how to apply a custom orange thumb and dark track to a scrollable container.

<div style="width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: #ff9900 #333333;">
  <div style="height: 500px; background: #eeeeee;">
    This box has a custom orange thumb on a dark gray track. Simple and effective for branding.
  </div>
</div>

An advanced example using JavaScript to dynamically swap scrollbar colors for a night mode theme.

<div id="ui-box" style="width: 300px; height: 150px; overflow: scroll; scrollbar-color: #0088ff #e0e0e0;">
  <div style="height: 400px; padding: 10px;">Scroll to see the initial blue thumb.</div>
</div>
<button onclick="setNightMode()">Toggle Night Mode</button>

<script>
function setNightMode() {
  const el = document.getElementById("ui-box");
  // Using the JS style object to dynamically update scrollbar colors
  el.style.scrollbarColor = "#ffffff #222222";
  el.style.backgroundColor = "#444444";
  el.style.color = "#ffffff";
}
</script>

Pro Tip

Use CSS variables to manage your scrollbar colors. This allows you to globally update your UI theme or toggle between light and dark modes by changing the variable values in one place, and the scrollbars will update automatically.

Deep Dive

Think of the scrollbar thumb as the car and the track as the road it travels on. This property gives you the paint booth to change the color of both. The first color value targets the thumb, which is the moving part users grab. The second value targets the track, which is the stationary background area. This property is part of the modern effort to standardize scrollbar styling across all browsers, replacing the old mess of vendor-prefixed pseudo-elements. It specifically focuses on color, while its sibling property, scrollbar-width, handles the thickness. When applied to an element, the style trickles down to any nested scrollable areas unless they are overridden.

Best Practices

Always maintain a high contrast ratio between the thumb and the track so users can easily distinguish the scroll position. If you use a dark track, use a light thumb, and vice versa. It is also wise to keep your custom scrollbar colors consistent with your site's overall branding so the UI feels cohesive rather than distracting.

Common Pitfalls

The biggest mistake is forgetting that this property requires two colors to work. If you only provide one, the browser will ignore the declaration. Also, keep in mind that many mobile operating systems use overlay scrollbars that disappear when not in use; these systems might ignore your custom colors entirely to prioritize system-level transparency.

Accessibility

Visual accessibility is the main concern here. If the scrollbar thumb blends too much into the track, users with low vision or motor impairments will struggle to find and interact with it. Always test your color choices against WCAG contrast guidelines to ensure the scroll handle is prominent.

Dev Data Table: scrollbar-color property

default auto
animatable yes
inherited yes
experimental no
year_intro 2018
year_standard 2024
js_syntax_1 element.style.scrollbarColor = "#ff0000 #cccccc";
js_syntax_2 element.style.setProperty("scrollbar-color", "#ff0000 #cccccc");
js_note In JavaScript, ensure the string contains both the thumb and track colors separated by a space.
browsers { "Chrome": 121, "Edge": 121, "Firefox": 64, "Safari": 17.4, "Opera": 107, "Chrome Android": 121, "Safari on iOS": 17.4, "Samsung Internet": 25, "Opera Mobile": 107 }
results render here...