CSS Scrollbar Generator
Style custom scrollbars and copy the cross-browser CSS.
Scrollable content line 1
Scrollable content line 2
Scrollable content line 3
Scrollable content line 4
Scrollable content line 5
Scrollable content line 6
Scrollable content line 7
Scrollable content line 8
Scrollable content line 9
Scrollable content line 10
Scrollable content line 11
Scrollable content line 12
Scrollable content line 13
Scrollable content line 14
Scrollable content line 15
Scrollable content line 16
Scrollable content line 17
Scrollable content line 18
Scrollable content line 19
Scrollable content line 20
Scrollable content line 21
Scrollable content line 22
Scrollable content line 23
Scrollable content line 24
Scrollable content line 25
Scrollable content line 26
Scrollable content line 27
Scrollable content line 28
Scrollable content line 29
Scrollable content line 30
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #e5e7eb;
}
::-webkit-scrollbar-thumb {
background: #6366f1;
border-radius: 8px;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #6366f1 #e5e7eb;
}Cross-browser scrollbar styling
Custom scrollbars use two different syntaxes. Chromium and Safari use the ::-webkit-scrollbar pseudo-elements for fine control over width, track, and thumb, while Firefox uses the standardized scrollbar-width and scrollbar-color properties. The generated CSS includes both so your scrollbar looks consistent everywhere. Scroll the preview to see it live — it all runs in your browser.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Styling a scrollbar to match a dark theme.
- Getting the cross-browser declarations in one place.
- Producing a thinner scrollbar for a compact panel.
- Comparing the standard properties against the WebKit pseudo-elements.
- Styling a scroller inside a component without affecting the page.
Frequently Asked Questions
- Why does it emit two different sets of rules?
- Because there are two mechanisms. `::-webkit-scrollbar` pseudo-elements are the Chromium and Safari way; Firefox implements the standard `scrollbar-width` and `scrollbar-color` properties. Including both is what makes the styling apply everywhere.
- Why does Firefox not honour my exact width?
- Because `scrollbar-width` only accepts `auto`, `thin` and `none` — there is no pixel value. The generator maps widths of 8px or below to `thin` and the rest to `auto`, which is as close as the standard property gets.
- Is a thin scrollbar an accessibility problem?
- It can be. A very narrow or low-contrast thumb is hard to see and hard to hit, especially with a trackball or on a touch screen. Keep a visible contrast against the track and avoid going below roughly 8px on anything a user must drag.
- Should I use scrollbar-width: none?
- Only when you provide another obvious way to scroll. Hiding the scrollbar removes the affordance and the position indicator; the content is still scrollable, but a mouse user may not realise there is more of it.
- Why is my page scrollbar unstyled?
- The root scrollbar is a special case — style it on `html` or `:root`, or use `body` depending on the browser. The generated rules use a universal selector so they reach it, but a more specific existing rule can still win.
- Does styling the scrollbar affect layout?
- Changing its width does, since the scrollbar occupies space in the content box on desktop. If elements shift when content becomes scrollable, `scrollbar-gutter: stable` reserves the space up front and is a better fix than styling.
Common errors and gotchas
- Making the scrollbar so thin or low-contrast that it becomes hard to grab.
- Hiding the scrollbar entirely, which removes the only cue that content scrolls.
- Styling only the WebKit pseudo-elements and leaving other browsers unstyled.
- Assuming the standard properties give the same control as the pseudo-elements, which they do not.
- Overriding the system scrollbar in a way that ignores the user's own accessibility settings.