Free visual CSS tool

CSS Scrollbar Theme Generator

Design a themed scrollbar with live preview, pick a ready-made preset, and copy both standard scrollbar-color and WebKit CSS in one go.

Scroll me. This panel demonstrates your themed scrollbar using both the modern standard scrollbar-color / scrollbar-width properties and the WebKit ::-webkit-scrollbar pseudo-elements, scoped only to this box.

The rest of this page's scrollbars are never affected — every rule below is scoped to a unique class applied only to this preview panel.

Try each preset in the left panel: Dark, Light, Neon and Minimal-thin all demonstrate a different balance of track, thumb and width.

You can also fine-tune each color and dimension by hand using the controls, then copy the generated CSS below into your own scrollable container.

Keep scrolling to see the full themed thumb and track render against this dark demo background.

That's the bottom of the demo content. Scroll back up to compare the top and bottom of the thumb travel.

Ready-to-use CSS

A scrollbar that matches your design

Style scrollbars without them looking like a jarring default browser element.

Scoped live preview

Only the demo panel is themed, so you can compare live without touching this page's own scrollbars.

Both CSS standards

Get modern scrollbar-color plus WebKit pseudo-elements together, for the widest browser coverage.

Four ready presets

Jump-start with Dark, Light, Neon or Minimal-thin, then fine-tune every color and size.

About themed scrollbars

For a long time, styling a scrollbar meant relying entirely on non-standard, WebKit-only pseudo-elements like ::-webkit-scrollbar, ::-webkit-scrollbar-thumb and ::-webkit-scrollbar-track, which Chrome, Safari and older Edge understood but Firefox never implemented. That gap has closed: the standard scrollbar-color and scrollbar-width properties now let you set a thumb and track color, plus a thin or auto width, with two lines of CSS supported broadly across modern engines including Firefox. Because WebKit-based browsers still prioritize their own pseudo-elements over the standard properties in some versions, the safest approach today is to ship both rule sets together, which is exactly what this generator outputs. This tool is intentionally focused and narrow: rather than trying to be a general-purpose scrollbar customizer with every possible option, it pairs a small set of ready-made theme presets with both current CSS standards, so you can get a consistent, cross-browser themed scrollbar without digging through spec differences yourself.

scrollbar-color

A shorthand for thumb-color and track-color, applied to any scrollable element or the whole document.

scrollbar-width

Accepts auto, thin or none, controlling the overall thickness in browsers that support the standard.

::-webkit-scrollbar

Targets the scrollbar itself in WebKit engines, letting you set an exact pixel width and corner radius.

Scoping matters

Always scope these rules to a specific class or container — applying them globally can make every scrollbar on your site look identical, whether that's wanted or not.

CSS scrollbar theme generator FAQ

Why does this tool generate two different sets of CSS?

Firefox and modern Chromium use the standard scrollbar-color and scrollbar-width properties, while Safari and older Chromium versions rely on the non-standard ::-webkit-scrollbar pseudo-elements, so both are generated to cover the widest range of browsers.

Will this affect scrollbars on the rest of the page?

No. The live preview styles are scoped to a unique class on the demo panel only, so they never leak out to style your browser's other scrollbars or the rest of this page.

Can I set an exact pixel width for the scrollbar?

Yes. Choose the Custom width option to set an exact WebKit scrollbar width in pixels, alongside the standard thin or auto keywords used by scrollbar-width.

Does this tool store or send my theme anywhere?

No. Every color and size choice is applied locally with injected CSS, and your last theme is optionally remembered in your browser's local storage only.