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.

CSS Scrollbar Styler

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; }

Everything runs in your browser — nothing is uploaded.