Custom Scrollbar CSS Generator
Design a custom scrollbar and copy the CSS. Set the width, track color, thumb color, hover color and corner radius, watch a live scrollable preview, then paste rules that cover WebKit browsers and Firefox.
How to style a custom scrollbar with CSS
- Set the scrollbar width and the thumb corner radius with the sliders.
- Pick the track, thumb and thumb hover colors and watch the live preview update.
- Copy the generated CSS and paste it into your stylesheet, scoping it with a selector if needed.
Examples
Slim grey scrollbar on the whole page
width 12, track #f1f1f1, thumb #888888, hover #555555, radius 6, selector :root
:root::-webkit-scrollbar { width: 12px; height: 12px; } plus scrollbar-color: #888888 #f1f1f1;Scoped scrollbar for one panel
selector .chat-window, thumb rebeccapurple, track rgba(0, 0, 0, 0.1)
.chat-window::-webkit-scrollbar-thumb { background: rebeccapurple; ... }Frequently asked questions
How do I style scrollbars in different browsers?
There are two systems. Chrome, Edge and Safari use the WebKit pseudo-elements like ::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb. Firefox uses the standard scrollbar-width and scrollbar-color properties. This tool outputs both at once so a single block works across browsers.
Why does the generated CSS include both ::-webkit-scrollbar and scrollbar-color?
Because no single property works everywhere. The ::-webkit-scrollbar rules give you fine control of width, track, thumb and hover in Chromium and Safari, while scrollbar-width and scrollbar-color cover Firefox. Including both is the cross-browser way to style scrollbars today.
Can I style the scrollbar of just one element instead of the page?
Yes. Change the selector from :root to a class or id such as .sidebar or #content. The tool wraps every rule in that selector, so only matching elements get the custom scrollbar and the rest of the page is untouched.
Does the thumb radius and hover color work in Firefox?
Firefox supports scrollbar-width (thin or auto) and scrollbar-color for the thumb and track, but it does not support a custom thumb radius or a separate hover color. Those refinements apply in WebKit browsers, while Firefox shows the thumb and track colors you choose.
Will a custom scrollbar hurt accessibility?
It can if you make the scrollbar too thin or use low contrast between the thumb and track, which makes it hard to grab. Keep a usable width, ensure the thumb stands out from the track, and avoid hiding the scrollbar entirely so keyboard and mouse users can still scroll comfortably.
Is my scrollbar styling sent to a server?
No. The preview and the generated CSS are built entirely in your browser, so your colors and settings never leave your device.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
CSS Filter Generator
Build a CSS filter visually. Drag sliders for blur, brightness, contrast, grayscale, sepia and more, see a live preview, and copy the filter code.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.