CSS Scrollbar Generator
Design a scrollbar and copy the CSS. Drag the width, choose track and thumb colours, set the radius, and a live scrollable box shows the result. You get the WebKit and Firefox rules together.
This custom scrollbar CSS generator lets you restyle a page or panel’s scrollbar and copy the code that makes it. Set the width, pick a track and thumb colour, round the corners, and watch a scrollable box react as you go. As a scrollbar styler it writes both the WebKit rules that Chrome, Edge and Safari read and the scrollbar-color line Firefox needs, so your bar looks right across browsers. Everything runs in your browser and nothing is uploaded.
The thumb darkens slightly on hover. Firefox reads thescrollbar-colorpair; Chrome, Edge and Safari read the WebKit rules.
Scroll me
Line 1. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
Line 2. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
Line 3. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
Line 4. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
Line 5. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
Line 6. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
Line 7. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
Line 8. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
Line 9. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
Line 10. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
Line 11. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
Line 12. Drag the bar or spin the wheel to see the styled track and thumb react in real time.
/* Chrome, Edge and Safari */
.custom-scrollbar::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #eef1f6;
border-radius: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #8b93a7;
border-radius: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #767d8e;
}
/* Firefox */
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: #8b93a7 #eef1f6;
}How it works
- 1
Set the size and colours
Drag the width, then choose a track and thumb colour and a corner radius. The preview box scrolls so you can see the bar.
- 2
Check both browsers
This style scrollbar tool writes the WebKit rules and the Firefox scrollbar-color line, so the look carries across.
- 3
Copy the CSS
Grab the generated CSS and drop it on any scrollable element by its class.
Instant & 100% private — nothing is uploaded
Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.
Frequently asked questions
- How do I style a scrollbar with CSS?
- Target the element with ::-webkit-scrollbar and its -track and -thumb parts for Chrome, Edge and Safari, and set scrollbar-color for Firefox. This css scrollbar generator writes all of that for you from the controls.
- Does custom scrollbar CSS work in Firefox?
- Yes, but Firefox uses a different mechanism. It reads scrollbar-width and scrollbar-color rather than the WebKit pseudo-elements, so the tool outputs both and you paste the whole block.
- Why isn’t my scrollbar changing?
- The rules only apply to an element that actually scrolls, so it needs a fixed height and overflow set to auto or scroll. Also check the class on your element matches the selector in the CSS.
- Can I make the scrollbar thinner or hidden?
- Lower the width slider for a thin bar. To hide it entirely you’d set the width to 0 or use scrollbar-width: none, though a visible bar is usually friendlier for readers.
- Does the thumb change colour on hover?
- Yes. The generated CSS includes a :hover rule that darkens the thumb a little so people can tell it’s draggable.
More tools
More from the Hivly network
Free sister tools on our other sites.
