Custom Scrollbar Generator
Style scrollbars with ::-webkit-scrollbar. Adjust width, track and thumb colors, radius, and hover colors with a live preview, then copy production-ready CSS in one click.
Scroll this box up and down to see your custom scrollbar in action.
Adjust the controls above — width, track color, thumb color, hover color, radius, and border — and the preview updates instantly.
Webkit-based browsers (Chrome, Safari, Edge, Opera) fully support ::-webkit-scrollbar. Firefox supports the newer scrollbar-color and scrollbar-width properties, which are included in the generated CSS.
Tip: very wide scrollbarsars are easier to grab on touch devices; very thin scrollbars feel more minimal on desktop.
Try hover — the thumb changes color when you hover over it. The generated CSS includes a :hover rule automatically.
For a "floating" look, set the track color to match your page background and add a small border to the thumb.
Keep scrolling to test the full length of the scrollbar.
End of preview content.
About the Custom Scrollbar Generator
Custom scrollbars are styled with the ::-webkit-scrollbar family of pseudo-elements in Chromium-based browsers and Safari, and with the scrollbar-color / scrollbar-width properties in Firefox. This generator outputs both, so your styles work across all major browsers.
Properties you can control
- Width — Overall scrollbar thickness.
- Track color — The background of the scrollbar groove.
- Thumb color — The draggable handle.
- Thumb hover color — Applied on
:hover. - Radius — Rounded corners on the thumb.
- Thumb border — Outline thickness and color for a "floating" look.
How to use
- Set the Scrollbar width to your preferred thickness.
- Pick Track color and Thumb color.
- Choose a Thumb hover color for interactivity.
- Adjust the radius and optional thumb border.
- Test by scrolling the preview box, then click Copy CSS.
Frequently asked questions
Does this work in Firefox? Yes — the generated CSS includes scrollbar-color and scrollbar-width for Firefox, alongside the full ::-webkit-scrollbar rules for Chromium/Safari.
Why don't my colors show in some browsers? Some browsers (especially older Firefox) only support the two-color, fixed-width model. The generated CSS degrades gracefully.
Can I hide the scrollbar but keep scrolling? Yes — set scrollbar-width: none and ::-webkit-scrollbar { display: none; }. This tool focuses on visible scrollbars, but you can edit the copied CSS to hide it.