What does this tool do?
Scrollbar Generator lets you visually craft custom scrollbar CSS: set the width, corner radius, and the track, thumb and thumb-hover colors, then grab the code instantly. Built for web designers and front-end developers, it outputs ready-to-paste rules for both WebKit and Firefox.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
Output for WebKit and Firefox
The generated code has two parts: ::-webkit-scrollbar pseudo-elements for Chrome, Safari and Edge, plus scrollbar-width and scrollbar-color for Firefox. A single copy gives you a consistent look across every modern browser. Because Firefox only supports a thin width and two colors, the tool automatically maps your thumb and track colors to that syntax, so you never have to write the Firefox rule by hand.
Design with a live preview
Every time you move a slider or pick a color, the scrollable box at the top reflects the new style immediately. That lets you tune width and corner-radius combinations against a real scrollbar instead of guessing. Only the WebKit preview is rendered on screen, but the CSS you copy includes both Firefox and WebKit rules, so it works in either browser once pasted into your project.
Frequently asked questions
How do I apply the generated CSS to one specific element?
Prefix the ::-webkit-scrollbar selectors with your own selector (e.g. .panel): .panel::-webkit-scrollbar { ... }. For Firefox, put scrollbar-color and scrollbar-width directly inside that element's rule.
Why isn't the corner radius applied in Firefox?
Firefox only supports scrollbar-width (auto/thin) and scrollbar-color for scrollbars; fine details like thumb radius or a hover color aren't available. Those properties only take effect in WebKit browsers.
Why does the width slider max out at 24px?
24px is a comfortable maximum even for touch on desktop; wider bars eat into your content area needlessly. Both horizontal and vertical bars use the same width/height value.
Is Custom Scrollbar Generator free?
Yes. Custom Scrollbar Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Custom Scrollbar Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.