CSS Custom Scrollbar Generator
Design a custom scrollbar with sliders and color pickers, watch it live in the preview panel, then copy ready-to-paste CSS: webkit rules for Chrome, Edge and Safari plus scrollbar-color and scrollbar-width rules for Firefox.
Design
Live preview
Scroll inside this panel. The panel uses the exact CSS printed below.
Preview content. This panel is scrollable so you can see your custom scrollbar in action.
Adjust the colors, width and radius on the left and watch the scrollbar update instantly.
The thumb is the draggable part; the track is the background it slides in.
Hover colors apply when the mouse rests on the thumb.
A gradient thumb blends your thumb color into the hover color from top to bottom.
Keep scrolling to check how the thumb looks at the bottom of the panel.
Narrow widths look clean on dense dashboards; wide ones are easier to grab on touch screens.
This is the last paragraph of the preview. Scroll back up to compare.
Generated CSS
How to use
- Pick track, thumb and hover colors, set width and radius, and toggle the gradient if you want one.
- Check the live preview panel to see the real result.
- Copy the CSS, replace
.my-scroll-areawith your own class, and paste it into your stylesheet.
Note: Webkit browsers read the pseudo-element rules; Firefox reads scrollbar-color and scrollbar-width. Firefox only supports auto, thin or none for width, so widths up to 10px map to thin and wider ones map to auto. This is an estimate of how the scrollbar will render; exact rendering varies by browser version.
Tips
- Keep the thumb clearly darker or lighter than the track so users can find it quickly.
- On pages with lots of content, a width of 10 to 14px is a comfortable middle ground.
- Rounded thumbs look modern; square thumbs (radius 0) look technical and sharp.