Box
scrollbar-color
scrollbar-color sets the colors of the scrollbar thumb (the part you drag) and the track (the part it moves along).
Syntax
auto | <color>{2}Preview
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
Presets
Drag the bottom-right corner to resize
Code
.box {
overflow: auto;
scrollbar-color: #4a86cb #e6f2f0;
}Controls
scrollbar-color#4a86cb #e6f2f0
Thumb (first color)
Track (second color)
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
About
Writing the value
Write two colors separated by a space: the thumb first, then the track. A single color is not allowed. To make the track unobtrusive, use transparent as the second color. With the initial value auto, the browser and OS pick the colors.
When scrollbars appear
Scrollbars appear on a box with overflow set to auto or scroll when its content overflows. The preview here uses overflow: auto with text that overflows both ways, so both scrollbars take the colors.
Watch out
- It is inherited, so setting it on
htmlcolors the page’s scrollbar and those of the scrolling boxes inside. - A thumb too close in lightness to its track is hard to spot.
- With overlay scrollbars that hide while you are not scrolling, as on macOS, the track color usually doesn’t show and the thumb appears only while you scroll.
- Chrome and Edge support it from 121, Safari from 26.2. Before that, colors were set with pseudo-elements such as
::-webkit-scrollbar-thumb. In Chrome and Edge, setting scrollbar-color or scrollbar-width to anything other thanautoturns off::-webkit-scrollbarstyles.