This writes scrollbar color and thickness as two separate blocks: the standard one and the non-standard one. Choose a scope, thumb and track colors, a thickness and a corner radius, and the output is ready to paste, with a live preview box above it showing the real scrollbar.
The standard is scrollbar-width and scrollbar-color from W3C CSS Scrollbars Styling Level 1. scrollbar-color takes two values, thumb color first and track color second, while scrollbar-width accepts only the auto, thin and none keywords. The non-standard ::-webkit-scrollbar family can set an exact px thickness and a hover color, but it is absent from the specification. With both on the same element, a browser that supports the standard properties uses them and drops the non-standard rules (as of October 2026).
The preview shows whichever side this browser supports, so another browser may look different. This tool does not generate scrollbar gutter reservation, nor separate styling for the horizontal and vertical bars. Hiding a scrollbar makes it hard to tell that an area scrolls at all, so decide carefully.
Frequently asked questions
scrollbar-width and scrollbar-color are the standard properties. The ::-webkit-scrollbar family is a WebKit-only extension that is absent from the specification, so other engines ignore it.
Standard scrollbar-width accepts only the auto, thin and none keywords. If you need an exact px thickness, you have to ship the non-standard block as well.
No. A browser that supports the standard properties applies only those and ignores the ::-webkit- rules, so shipping both does not create a conflict.