A custom scrollbar replaces the browser's plain gray scrollbar with a track and thumb that match your site's own design.
This CSS scrollbar generator lets you style scrollbar width, thumb color, track color, hover state and corner radius, then copy the finished CSS.
Chrome, Safari and Edge style scrollbars with the ::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb pseudo-elements.
Firefox and other browsers that support the modern standard use the scrollbar-width and scrollbar-color CSS properties instead — both are included in the CSS below, so the result works across browsers.
Hover over the scrollbar thumb in this preview to see the hover color you picked take effect.
Custom scrollbar styling is especially popular for chat panels, sidebars, code blocks, dashboards and modal dialogs.
A thinner scrollbar width with a soft border radius tends to look the most native; a wider, square thumb reads as more deliberately styled.
The scrollbar track color sits behind the thumb — keep it close to your container's background for a subtle look, or contrast it for a bold, visible scrollbar.
This preview box has enough text to scroll no matter your screen size, so the scrollbar thumb and track colors are always visible while you adjust the controls.
A scrollbar generator like this one saves you from hand-writing vendor-prefixed CSS for every browser and remembering the exact pseudo-element names.
The presets below give you a quick starting point — Default, Minimal, Rounded, Dark Mode, Ocean, Sunset, Candy, Forest and Square — then fine-tune the color, width and radius from there.
Scrollbar styling works the same way whether you're building a full page, a scrollable sidebar navigation, or a small overflow panel inside a card.
Keep scrolling to see the custom scrollbar thumb and track stay consistent for the full height of this box.
Once your custom scrollbar looks right, copy the CSS and add the .custom-scrollbar class name to any scrollable element in your project.
