Scrollbar Generator
Style webkit scrollbars: size, track, thumb, hover and radius, copy CSS with a Firefox fallback.
Size
Colors
Shape
Live preview (scroll inside the box)
The box below carries both a vertical and a horizontal scrollbar, styled by the same rules the CSS snippet uses.
Scroll down for the vertical bar, scroll right for the horizontal one. Every paragraph here only exists to give the box something to scroll.
Line two of filler content. Line three of filler content. Line four of filler content.
Line five of filler content. Line six of filler content. Line seven of filler content.
Line eight of filler content. Line nine of filler content. Line ten of filler content.
Line eleven of filler content. Line twelve of filler content. Line thirteen of filler content.
Line fourteen of filler content. Line fifteen of filler content. Line sixteen of filler content.
Generated CSS
The ::-webkit-scrollbar rules cover Chrome, Edge, Safari and Opera. Firefox has no pseudo-element styling, so the snippet also sets the standard scrollbar-width and scrollbar-color properties.
How to use it
- Set the width for the vertical bar and the height for the horizontal one. Both come from the same
::-webkit-scrollbarrule. - Pick a track color (the groove) and a thumb color (the handle you drag), plus a separate thumb hover color for feedback.
- Round the thumb radius and track radius, and add a thumb border if you want a padded ring of the track color showing around the handle.
- Choose what Firefox should do under the standard
scrollbar-widthproperty:auto,thinornone. - Scroll inside the preview box to see both bars live, then copy the CSS. The snippet starts with the class
.scroll-area, so rename it to whatever your markup uses.
Common use cases
- Sidebars and chat panels - slim themed bars that match the app instead of the system default.
- Code and log viewers - a wide track with a high-contrast thumb keeps scrolling discoverable in dense text.
- Dark themes - swap the track and thumb for dark values so bright system bars stop glaring.
- Embedded widgets - contained scroll areas where the operating system scrollbar would look out of place.
Why it stays private
Every value is applied locally and the CSS is assembled in the page. The preview styles are injected into a scoped style element, so nothing is fetched and no configuration is sent anywhere.
FAQ
Q: Why are there two blocks of CSS?
A: Chrome, Edge, Safari and Opera style scrollbars through the ::-webkit-scrollbar pseudo-elements, while Firefox only supports the standard scrollbar-width and scrollbar-color properties. The snippet covers both so the styling degrades gracefully.
Q: The hover color does nothing on my phone. Why?
A: Touch interfaces do not hover, so the :hover rule only shows on pointer devices. The base thumb color is what touch users see.
Q: Can I hide the scrollbar completely?
A: Setting scrollbar-width: none hides it in Firefox, and the webkit block can set display: none on the pseudo-elements for Chromium browsers. Do that only when another scroll affordance exists, otherwise users lose their position indicator.
Q: Why does the preview show both directions? A: The preview box is intentionally narrower and shorter than its content, so the vertical and horizontal rules both render and you can check radius, border and colors on each.
Your data stays on this device
Scrollbar Generator runs 100% locally. Everything you paste or drop is processed by your own browser and never transmitted. Nothing is stored on our servers — close the tab and it is gone.
Nothing you type is sent to a server, logged, or used for analytics. The page works even with your network disconnected after first load.