Skip to content
TextArray1.87.0
100% local

CSS scrollbar style generator

Generate custom ::-webkit-scrollbar and scrollbar-width/scrollbar-color CSS rules.

Output
Related tools
CSS box-shadow generatorDeveloper tools
CSS color variable extractorDeveloper tools
CSS easing and transition generatornewDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS scrollbar style generator
The default browser scrollbar rarely matches the rest of a design, and styling one means remembering two different specs at once: the WebKit ::-webkit-scrollbar pseudo-elements Chrome, Safari and Edge use, and the standard scrollbar-width/scrollbar-color properties Firefox reads instead. This tool generates both at once from a handful of options, so you copy one block of CSS and every major browser renders a matching scrollbar.
Set a target selector — body for the whole page, or a class like .sidebar for one scrollable panel — then choose the scrollbar's width in pixels, the track and thumb colors, and the color the thumb switches to on hover. Thumb roundness controls the border-radius of the draggable bar, and the inset border adds a transparent gap between the thumb and the track so it reads as a floating pill instead of a solid block. The Variant option switches between the browser's normal scrollbar, a slimmer "thin" one, and "hidden", which removes the scrollbar entirely with -ms-overflow-style and scrollbar-width: none while leaving the element's own scrolling untouched.
Turning on the dark mode variant wraps a second copy of the rules in an @media (prefers-color-scheme: dark) block, with the track and thumb colors automatically darkened so a site that already switches themes gets a scrollbar that switches with it — no separate calculation needed. Every option updates the output live as you adjust it, and the tally under the result reports how many CSS rule blocks were generated and the exact character count.
Everything runs locally in your browser: no selector, color or CSS is ever sent to a server. Copy the result straight into your stylesheet, download it as a .txt file, or send it to another tool's input to keep refining it.
FAQ
Why does the tool generate both scrollbar-width and ::-webkit-scrollbar rules?
No single CSS property is supported everywhere. Firefox reads the standard scrollbar-width and scrollbar-color properties, while Chrome, Safari and Edge only respond to the older ::-webkit-scrollbar pseudo-elements. Generating both means the same stylesheet works across browsers.
Does the "Hidden" variant stop the element from scrolling?
No. It only hides the visual scrollbar track and thumb using scrollbar-width: none and -ms-overflow-style: none. The element still scrolls normally with a mouse wheel, trackpad or touch — the content just has no visible scrollbar.
What does the thumb inset border actually do?
It adds a transparent border around the thumb with background-clip: padding-box, which shrinks the visible fill inward from the track edges. That gap is what makes a thumb look like a rounded pill rather than a bar that touches both sides of the scrollbar.
How are the dark mode colors calculated?
Each color you set is mixed toward black by a fixed amount and placed inside an @media (prefers-color-scheme: dark) block, so a site using automatic dark mode gets a proportionally darker track and thumb without you picking a second set of colors by hand.
Is my CSS or the colors I choose uploaded anywhere?
No. The scrollbar CSS is generated entirely in your browser — nothing you type or select ever leaves your device.