Why does this generator output two different sets of properties?

There's no single standard way to style scrollbars yet. scrollbar-width and scrollbar-color are the standard CSS Scrollbars Module properties (supported in Firefox and Chromium), while ::-webkit-scrollbar and its sub-elements are a long-standing non-standard pseudo-element API (supported in Chrome, Safari, and Edge) — using both covers every major browser.

Why can't I set a border or box-shadow on scrollbar-color directly?

scrollbar-color only accepts two color values (thumb then track) — no border, radius, or shadow. Those finer details (border-radius, border, hover state) are only controllable through the ::-webkit-scrollbar-thumb/::-webkit-scrollbar-track pseudo-elements, which is why Chromium browsers can look more customized than Firefox.

Why does my scrollbar thumb still look like a rounded pill on macOS?

macOS defaults to overlay scrollbars (System Settings → Appearance → Show scrollbars → "Automatically based on mouse or trackpad"), and in that mode Chrome, Edge, and Safari largely defer to the OS to draw the thumb as its native rounded capsule — your border-radius and width get partially overridden even though the background-color still comes through. Switch that macOS setting to "Always" to force classic, always-visible scrollbars, where ::-webkit-scrollbar-thumb is honored exactly as styled.

Does this work on the whole page, or only inside a div?

Both — apply .custom-scrollbar to html or body to restyle the page's main scrollbar, or to any element with overflow-y: auto/scroll (like the preview box above) to restyle just that element's scrollbar.

Why doesn't my scrollbar show the new styles at all?

The element needs actual overflow to show a scrollbar — give it a fixed height/max-height smaller than its content plus overflow-y: auto or overflow: scroll. A scrollbar also won't render in a browser that supports neither scrollbar-color nor ::-webkit-scrollbar, though that combination is now rare.

Does this tool store or upload anything?

No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.

CSS CUSTOM SCROLLBAR GENERATOR

Style a scrollbar's width, radius, and colors, preview it live, and copy the CSS.

Scroll line 1— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Scroll line 2— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Scroll line 3— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Scroll line 4— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Scroll line 5— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Scroll line 6— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Scroll line 7— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Scroll line 8— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Scroll line 9— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Scroll line 10— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Scroll line 11— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Scroll line 12— this box uses the scrollbar styles you're configuring below, so drag the scrollbar or scroll inside the box to preview it live.

Width: 10pxCorner radius: 8px

Track

Thumb

Thumb hover

Thin (Firefox scrollbar-width)

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #ff6a35 #2a2622;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #2a2622;
  border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #ff6a35;
  border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #ffb347;
}

How to use the custom scrollbar

1
Scroll inside the preview box to see your scrollbar styling live.
2
Set the width, corner radius, track color, thumb color, and thumb hover color.
3
Toggle Thin for Firefox's scrollbar-width: thin.
4
Copy the CSS and apply the .custom-scrollbar class to any element with overflow: auto/scroll.

Questions

Why does this generator output two different sets of properties?: There's no single standard way to style scrollbars yet. scrollbar-width and scrollbar-color are the standard CSS Scrollbars Module properties (supported in Firefox and Chromium), while ::-webkit-scrollbar and its sub-elements are a long-standing non-standard pseudo-element API (supported in Chrome, Safari, and Edge) — using both covers every major browser.
Why can't I set a border or box-shadow on scrollbar-color directly?: scrollbar-color only accepts two color values (thumb then track) — no border, radius, or shadow. Those finer details (border-radius, border, hover state) are only controllable through the ::-webkit-scrollbar-thumb/::-webkit-scrollbar-track pseudo-elements, which is why Chromium browsers can look more customized than Firefox.
Why does my scrollbar thumb still look like a rounded pill on macOS?: macOS defaults to overlay scrollbars (System Settings → Appearance → Show scrollbars → "Automatically based on mouse or trackpad"), and in that mode Chrome, Edge, and Safari largely defer to the OS to draw the thumb as its native rounded capsule — your border-radius and width get partially overridden even though the background-color still comes through. Switch that macOS setting to "Always" to force classic, always-visible scrollbars, where ::-webkit-scrollbar-thumb is honored exactly as styled.
Does this work on the whole page, or only inside a div?: Both — apply .custom-scrollbar to html or body to restyle the page's main scrollbar, or to any element with overflow-y: auto/scroll (like the preview box above) to restyle just that element's scrollbar.
Why doesn't my scrollbar show the new styles at all?: The element needs actual overflow to show a scrollbar — give it a fixed height/max-height smaller than its content plus overflow-y: auto or overflow: scroll. A scrollbar also won't render in a browser that supports neither scrollbar-color nor ::-webkit-scrollbar, though that combination is now rare.
Does this tool store or upload anything?: No — every setting is applied and rendered locally in your browser. Nothing is sent to a server.