⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

CSS Scrollbar Generator

Style a scrollbar's width, track, thumb and hover color, then see the real WebKit result next to the real Firefox result — two genuinely different browser systems, side by side.

10px
8px

Styled with ::-webkit-scrollbar pseudo-elements — this box renders through your browser's own real engine if it's Chrome, Safari or Edge.

Styled with Firefox's scrollbar-width and scrollbar-color properties. Other browsers ignore these and show their own default scrollbar here — open this page in Firefox to see the real result.

Firefox has no separate hover color, thumb border-radius or independent track styling — only scrollbar-width, mapped here from your chosen thickness to the real keyword: thin

Processing... 0%

Result

Chrome, Safari and Edge style scrollbars with the ::-webkit-scrollbar family of pseudo-elements: separate rules for the track, the thumb, and the thumb's hover state, plus a pixel-exact width and a thumb border-radius. Firefox ignores all of that entirely and instead reads two standard properties, scrollbar-width and scrollbar-color, that later entered the CSS Scrollbars spec. These are not two dialects of the same feature — they are two different feature sets with different ceilings, and most scrollbar generators quietly paper over the gap by only showing the WebKit result. This one does not.

Set the width, track color, thumb color, hover color and thumb corner radius once, and the tool builds two rule sets from the same inputs. The WebKit block scopes ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb and its :hover state to the left demo box, so what you see there is exactly what Chrome, Safari and Edge render — the browser's own real engine, not a simulated overlay. The Firefox block sets scrollbar-width and scrollbar-color on the right demo box using that same browser's own engine, which is why the box only looks different when this page is actually open in Firefox; in a WebKit browser it shows its own default scrollbar there, and the tool says so rather than faking a Firefox look with borrowed pixels.

The width mapping is the clearest example of the gap: Firefox's scrollbar-width accepts only the keywords auto, thin or none — never an exact pixel figure. This generator maps your chosen width honestly (8px and under becomes thin, anything wider becomes auto) and displays the resulting keyword next to your input, rather than inventing a fake pixel-perfect Firefox result that does not exist. Firefox also has no way to set a separate hover color, an independent thumb border-radius, or a track color that is not simply the second value of scrollbar-color — these are permanent, real limitations of the platform, not omissions in this tool.

Copy the combined CSS block and both rule sets travel together, each under its own comment, ready to paste into a stylesheet as-is. Everything renders and updates in your own browser as you drag the controls — no upload, no account, no server round-trip, and it keeps working offline once the page has loaded.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Shared controls — width, track color, thumb color, hover color, thumb corner radius — drive both engines from the same inputs.
  • Honest scrollbar-width mapping: Firefox only supports thin, auto or none, so the exact pixel value you pick is mapped to the closest real keyword and shown next to your input.
  • Combined, copyable CSS output with both the WebKit pseudo-element rules and the Firefox standard properties, clearly commented.

Key Benefits

✓ Two live demo boxes render each engine's own real scrollbar — the WebKit box always shows the true result in Chrome, Safari and Edge, no faked rendering.
✓ The Firefox capability gap is shown, not hidden: hover color, thumb radius and independent track styling simply do not exist in Firefox, and the tool says so plainly instead of pretending otherwise.
✓ One copyable CSS block ships both rule sets together with a fallback comment, ready to paste as-is.

Use Cases

  • • Style a dashboard sidebar's scrollbar to match the brand palette while seeing exactly how far that styling reaches in Firefox before shipping it.
  • • Grab the honest Firefox scrollbar-width keyword for a chosen thickness instead of guessing whether thin or auto is the closer match.
  • • Copy one CSS block that carries both the WebKit pseudo-element rules and the Firefox standard properties, each clearly commented, straight into a stylesheet.