Scrollbar Color Property
Last updated: 2026-09-13
scrollbar-color Scrollbar Color Property
The scrollbar-color property customizes the color of the browser scrollbar, covering both the thumb and the track. It is part of the CSS Scrollbars specification and provides a simple way to match the scrollbar to the page's overall palette without JavaScript plugins.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
scrollbar-color: auto | dark | light | <color> <color>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | dark | light | Keyword | A preset color scheme |
<color> <color> | Value | The thumb and track colors |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scrollbar-color | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： scrollbar-color is currently supported mainly in Chromium-based and Firefox browsers; Safari and older browsers need the ::-webkit-scrollbar pseudo-element.
Tip： The two color values correspond to the thumb and the track; if only one value is given, the browser computes the other automatically.
❓ FAQ
QWhat is the difference between scrollbar-color and ::-webkit-scrollbar?
Ascrollbar-color is a W3C standard property: two colors specify the thumb and the track — simple, but it can only change colors and thickness. ::-webkit-scrollbar is a WebKit/Chromium proprietary pseudo-element that can also customize width, rounding, and borders — far more capable but non-standard. Firefox uses the standard property; Chromium and Safari use the pseudo-element.
QWhat do the dark and light values of scrollbar-color do in CSS?
Adark tells the browser to render the scrollbar in a dark theme — a dark thumb with a light track. light is the opposite: a light thumb with a dark track. The exact colors are decided by the browser based on the platform and theme, and are commonly used to match dark mode. If you need exact colors, write two color values directly: the first is the thumb, the second the track.
QWhy does scrollbar-color not work in Chrome or Safari browsers?
AChrome officially supports scrollbar-color starting with version 121 (before that, Chromium only used ::-webkit-scrollbar), and Safari still does not recognize the standard property. There is no single cross-browser solution for a uniform scrollbar: the standard property covers Firefox and new Chrome, while the pseudo-element covers Safari and older Chrome.
QHow do I make scrollbar colors work across all browsers in CSS?
AUse a two-track approach: first set the thumb and track colors with the standard scrollbar-color for Firefox (and new Chrome), then style the WebKit scrollbar with ::-webkit-scrollbar and ::-webkit-scrollbar-thumb. If you need more, fall back to a JavaScript scrollbar library.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
