Make your scrollbars match your UI. Do it with only two CSS properties.
scrollbar-color sets the colors.
First value is the thumb. Second is the track.
Example: scrollbar-color: hashtag#8aaa8a hashtag#294b29;
scrollbar-width controls size.
Use auto, thin, or none to hide it.
Example: scrollbar-width: thin;
Apply these on any scrollable container. Or put them on `:root to style the page scrollbars.
It respects user settings like overlay scrollbars. So on macOS they appear when scrolling and keep your colors.
Accessibility tip. Pick a thumb color with strong contrast against the track.
For the browser support, it’s not great for now.
~73% for the scrollbar-color property.
~83% for the scrollbar-width property.
But they graciously fallback to default style if not supported.
Custom scrollbars can improve visual consistency, but usability must stay first. Keep enough contrast and width for discoverability, and avoid styling choices that hide scroll affordance.
Custom scrollbars can support visual consistency, but discoverability and contrast come first. Keep width and color choices readable across themes.
Run interaction tests with rapid clicks and navigation changes. Input should stay responsive even while transitions are active.
For teams, scrollbar-color is easiest to maintain when it starts in one documented example before broader reuse. That rollout sequence preserves clarity and reduces regressions during future refactors.
Aim for subtle customization that keeps scrollbar track and thumb clearly distinguishable at a glance.
Want to build modern interfaces with less JavaScript?
I wrote a guide about building modern UI with HTML and CSS first. It covers practical patterns you can use before reaching for JavaScript.
Learn more