CSS Scrollbar Generator
Generate custom CSS scrollbars with scrollbar-width, scrollbar-color, and ::-webkit-scrollbar rules.
Loading tool...
What is CSS Scrollbar Generator?
The CSS Scrollbar Generator is a visual tool for styling scrollbars with native CSS. It produces the modern scrollbar-width and scrollbar-color properties for Firefox and current Chromium browsers, plus an optional ::-webkit-scrollbar block with size, radius, and hover controls for older Chrome and Safari. A live preview updates as you tweak every control, and one click copies clean, production-ready CSS.
Key Benefits
- Brand-consistent scrollbars without JavaScript
- Live preview of every property combination
- Both standard and WebKit output in one snippet
- Copy-ready CSS scoped to a class
Common Use Cases
- •Matching scrollbars to a dark-mode design system
- •Slimming chunky default bars in dashboards
- •Hiding scrollbars in carousels while keeping scroll
- •Prototyping scrollbar styles before shipping
How to Use the CSS Scrollbar Generator
- Pick a scrollbar width: Choose auto for the native look, thin for a slimmer bar, or none to hide the scrollbar while keeping scroll functionality.
- Choose thumb and track colors: Use the color pickers or type a hex value. Pick a thumb hover color so users get feedback when dragging the bar.
- Enable the WebKit block (optional): Turn on ::-webkit-scrollbar pseudo-elements for older Chrome and Safari, then tune the size and thumb border radius sliders.
- Preview and copy: Scroll the live preview to check the feel, then click Copy CSS and paste the rules into your stylesheet.
Key Features
- Standard scrollbar-width (auto/thin/none) and scrollbar-color output for Firefox and modern Chrome.
- Optional ::-webkit-scrollbar block with size, border-radius, and hover color controls.
- Live scrollable preview that updates instantly as you tweak every control.
- Color pickers with hex input validation and sensible fallback values.
- One-click copy of clean, production-ready CSS scoped to a .scrollable class.
Frequently Asked Questions
What does scrollbar-width do?
scrollbar-width sets the thickness of the scrollbar: auto keeps the platform default, thin renders a slimmer variant, and none hides the scrollbar completely while scrolling still works. It is supported in Firefox and modern Chromium browsers.
How does scrollbar-color work?
scrollbar-color takes two colors: the first colors the thumb (the draggable part) and the second colors the track. For example, scrollbar-color: #6366f1 #e2e8f0 gives an indigo thumb on a light gray track.
Do I still need ::-webkit-scrollbar?
Modern Chrome, Edge, and Safari now support scrollbar-width and scrollbar-color, but older versions only honor the ::-webkit-scrollbar family of pseudo-elements. Including both blocks gives you pixel-level control (size, radius, hover) and the widest browser coverage.
Is hiding the scrollbar bad for accessibility?
Hiding the scrollbar with scrollbar-width: none removes a visual affordance, so use it carefully. Keep another indicator that content scrolls, ensure keyboard scrolling works, and consider prefers-reduced-motion and user preference settings before hiding scrollbars entirely.