Home/Tools/Components/Scrollbar Generator

Components · Generator

Scrollbar Generator

Style custom scrollbars with custom track, thumb, and hover colors for Chrome, Firefox and Edge.

Scrollbar Style

Width8px

Thumb Border Radius4px

Track Color

Thumb Color

Thumb Hover Color

Preview

Scrollable content — line 1

Scrollable content — line 2

Scrollable content — line 3

Scrollable content — line 4

Scrollable content — line 5

Scrollable content — line 6

Scrollable content — line 7

Scrollable content — line 8

Scrollable content — line 9

Scrollable content — line 10

Scrollable content — line 11

Scrollable content — line 12

Scrollable content — line 13

Scrollable content — line 14

Scrollable content — line 15

Scrollable content — line 16

Scrollable content — line 17

Scrollable content — line 18

Generated CSS

.scrollable {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #888888 #f1f1f1; /* Firefox */
}

/* Chrome, Edge, Safari */
.scrollable::-webkit-scrollbar {
  width: 8px;
}
.scrollable::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.scrollable::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 4px;
}
.scrollable::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Scrollbar Generator?

Style custom scrollbars with CSS. Set track colour, thumb colour, width, and border-radius. Works in Chromium-based browsers.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Scrollbar Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Set scrollbar width

The -webkit-scrollbar width controls the scrollbar track width in Chromium browsers. Firefox uses thin (6px), auto (default), or none.

Choose track and thumb colours

Track is the channel background; thumb is the draggable handle. Set both colours and the thumb hover colour.

Set border-radius

Rounded thumbs (border-radius: 4px) are the current UI convention for custom scrollbars.

Copy the CSS

Apply the class to any scrollable container. Both -webkit and Firefox syntax are included.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

scrollbar.css

/* Chromium-based browsers */
.custom-scroll::-webkit-scrollbar {
  width: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

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

/* Firefox */
.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

Firefox does not support -webkit-scrollbar pseudo-elements. The scrollbar-width and scrollbar-color properties are the Firefox equivalent. Chrome 121+ also supports the standard properties.

Common mistakes & fixes

Common mistakes & how to fix them

A few habits trip people up. Here is what to watch for — and the exact fix.

Applying scrollbar styles to body and expecting them everywhere

::-webkit-scrollbar on body only styles the page scrollbar, not overflow scrollable elements.

Fix: Apply the scrollbar class to each scrollable element, or use :root ::-webkit-scrollbar for a global default.

Pro tips

Pro tips for better results

★

Set scrollbar-gutter: stable to prevent layout shift

When content height changes and a scrollbar appears/disappears, the page width shifts. Add scrollbar-gutter: stable to the scrollable container to reserve space for the scrollbar permanently.

FAQ

Frequently asked questions

Mobile browsers do not show persistent scrollbars. Custom scrollbar CSS has no visual effect on iOS or Android. The styles apply only on desktop browsers.

Chrome 121+ supports scrollbar-color and scrollbar-width as part of the CSS Scrollbars Level 1 spec. Generate both syntaxes for coverage across all Chromium versions.