Why are there two sets of scrollbar rules?

Chrome, Edge and Safari use the ::-webkit-scrollbar pseudo-elements, while Firefox uses the standard scrollbar-width and scrollbar-color properties. The tool outputs both so your scrollbar styles work across browsers.

What do scrollbar-width: thin and scrollbar-color do?

scrollbar-width: thin gives a slimmer scrollbar in Firefox, and scrollbar-color sets the thumb and track colours in the order thumb then track.

What is the thumb and what is the track on a scrollbar?

The thumb is the draggable part you grab to scroll, and the track is the groove it slides along. This tool lets you set a colour for each.

Does the styled scrollbar apply to the whole page or one element?

As written, the WebKit rules target the page scrollbar. To style a specific scrollable element, scope the ::-webkit-scrollbar rules to that element's selector, for example .panel::-webkit-scrollbar.

Is anything uploaded?

No — the scrollbar CSS is generated entirely in your browser.

What is the CSS Scrollbar Styler?

Free CSS scrollbar styler — set width, radius, track and thumb colours, preview a scrollable box, and copy WebKit plus Firefox scrollbar CSS. Runs entirely in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Scrollbar Styler

Name: CSS Scrollbar Styler
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

This tool lets you design a custom scrollbar and copy cross-browser CSS for it. Set the scrollbar width, corner radius and the track and thumb colours, then scroll the live preview to see it in action. Browsers use two different mechanisms for scrollbar styling, and this generator outputs both so your design works everywhere.

How it works

There is no single standard for scrollbar styling, so the tool emits two rule sets:

WebKit pseudo-elements (::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb) for Chrome, Edge and Safari, where your width, radius and colours are applied directly.
Standard properties (scrollbar-width and scrollbar-color) for Firefox, where scrollbar-color takes the thumb colour first, then the track.

Both reflect the same width and colour choices, so the scrollbar looks consistent across browsers.

Example

A 12px-wide scrollbar with an indigo thumb (#6366f1) on a light track (#e2e8f0) produces:

/* Standard (Firefox) */
scrollbar-width: thin;
scrollbar-color: #6366f1 #e2e8f0;

/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #e2e8f0; }
::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 8px; }

Applying to a specific element vs the whole page

As generated, the WebKit rules apply globally to all scrollbars on the page. To scope them to one scrollable element, prepend the element’s selector:

.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: #f1f5f9; }
.sidebar::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }

The standard scrollbar-width and scrollbar-color properties are also inherited, so setting them on a parent element passes the style down to any scrollable children. However, for precise targeting you should usually set them on the element that actually scrolls (the one with overflow: auto or overflow: scroll).

Design guidance

Contrast and legibility. Make the thumb noticeably darker or lighter than the track so users can identify it at a glance. A thumb-to-track contrast ratio of at least 3:1 is a reasonable accessibility target.

Width tradeoffs. Very thin scrollbars (4–6px) look sleek but are harder to grab on touch-enabled laptops. If your audience includes touch users, keep the thumb at least 8px. Below 4px, some browsers may ignore the width entirely.

Border and hover states. The WebKit API provides additional pseudo-elements for hover and active states. Adding a hover state on the thumb gives interactive feedback:

::-webkit-scrollbar-thumb:hover {
  background: #4f46e5;
}

Transparent tracks. If you want the track to disappear entirely (only the thumb is visible), set background: transparent on ::-webkit-scrollbar-track. This works well for code editors and sidebars where you want the scrollbar to feel unobtrusive.

scrollbar-width: none to hide entirely. If your design uses a custom scroll indicator or gesture UI, you can hide the native scrollbar in all modern browsers with scrollbar-width: none alongside ::-webkit-scrollbar { display: none }.

Everything runs in your browser — nothing is uploaded.