Micro Tools
Advertisement

Scrollbar styler

Design a custom scrollbar with sliders for width and roundness plus track, thumb and hover colors. Test it in the live scroll box, then copy the CSS.

Scrollbar style

Style the thumb, track and hover state. Scroll the preview box to test.

Preview and CSS
Advertisement

The two scrollbar engines

Chrome, Edge and Safari style scrollbars with ::-webkit-scrollbar pseudo-elements, giving full control over width, colors and radius. Firefox uses the simpler scrollbar-width and scrollbar-color properties. This tool outputs both so your design holds up everywhere.

Why style the hover state

A thumb that darkens on hover signals interactivity and helps users grab it on long pages. Keep the hover color in the same hue family, about 15 percent darker, so the change feels like a press rather than a color swap.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Scrollbar Styler FAQs

Will custom scrollbars work on mobile?
Mostly they will not show: mobile browsers use overlay scrollbars that appear only while scrolling and ignore webkit styling. Your custom scrollbar is a desktop enhancement; mobile users get the native experience, which is fine.
How wide should a custom scrollbar be?
10 to 14px is the sweet spot: slimmer than the 16px default but still easy to grab. Below 8px the thumb gets fiddly for mouse users, and touch users cannot grab it precisely anyway.
Can I style horizontal scrollbars too?
Yes, add a ::-webkit-scrollbar:horizontal rule with a height instead of width. The same thumb and track colors apply; this tool focuses on the vertical case which covers 95 percent of needs.
Why does Firefox ignore my border-radius?
Firefox scrollbar-color only tints the thumb and track, it does not support radius, borders or hover states. Firefox users get your colors in the native shape, which is an acceptable graceful degradation.
Should the scrollbar match my brand color?
Yes, a brand-colored thumb is one of the cheapest branding wins on a page. Keep the track neutral and light so the colored thumb stays the focus.
Advertisement