Open menu

CSS Scrollbar Styler

Customize scrollbars for one element or the whole page. Set the width, thumb and track colors, a hover color, corner radius and an inset that makes the thumb float inside the track. The export uses ::-webkit-scrollbar for Chrome, Edge and Safari, and the standard scrollbar-color and scrollbar-width properties for Firefox, arranged so that Chromium doesn't drop your custom shape. Checks cover thumb contrast and very thin bars.

Preset gallery

Line 1: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Line 2: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Line 3: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Line 4: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Line 5: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Line 6: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Line 7: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Line 8: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Line 9: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Line 10: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Line 11: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Line 12: scroll inside this box to see the custom scrollbar. Content keeps flowing so there is something to scroll.

Accessibility checks

  • Pass The thumb has 3.9:1 contrast with the track, so the scroll position is easy to see.
  • Pass The visible thumb is 6px wide: easy to grab.
  • Pass Firefox uses the standard properties; Chrome, Edge and Safari use ::-webkit-scrollbar. Both are included.

Export code

/* Firefox (and other browsers without ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
  .scroll-area {
    scrollbar-width: thin;
    scrollbar-color: #64748B #E2E8F0;
  }
}

/* Chrome, Edge, Safari */
.scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scroll-area::-webkit-scrollbar-track {
  background: #E2E8F0;
}

.scroll-area::-webkit-scrollbar-thumb {
  background: #64748B;
  border: 2px solid #E2E8F0;
  border-radius: 999px;
}

.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

.scroll-area::-webkit-scrollbar-corner {
  background: #E2E8F0;
}
Favourites on this device (0)

No favourites yet.

Shape & scope
Apply to
Firefox width
Colors
Thumb color
Thumb hover color
Track color
Content background

How to use the scrollbar styler

  1. Choose the scope: one element (with your own class name) or the whole page.
  2. Set the size: the pixel width for Chrome, Edge and Safari, and thin, normal or hidden for Firefox.
  3. Shape the thumb with a corner radius and an inset, which draws a track-colored border so the thumb looks like it floats.
  4. Pick colors: thumb, thumb on hover, track and the content background.
  5. Scroll the preview to try it, then export CSS, SCSS or a Tailwind utilities layer.

How it works

@supports not selector(::-webkit-scrollbar) {
  .scroll-area { scrollbar-width: thin; scrollbar-color: #64748B #E2E8F0; }
}
.scroll-area::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-area::-webkit-scrollbar-thumb { background: #64748B; border: 2px solid #E2E8F0; border-radius: 999px; }

For the whole page, the WebKit pseudo-elements are written without a selector, so they apply to the document scrollbar.

Worked examples

Example 1: a chat sidebar

Load Minimal for a narrow conversation list. The 8px thumb is unobtrusive but still easy to drag.

Example 2: a dark code panel

Load Dark or Terminal for code blocks and consoles on dark backgrounds. The track blends into the panel, and the thumb has enough contrast to see your position.

Example 3: a branded page

Load Page thin and change the thumb to your brand color. Keep the track close to the page background so the scrollbar doesn’t dominate.

Tips

  • Scrollable regions should be focusable (tabindex="0") with an accessible name, so keyboard users can scroll them.
  • Test on macOS, where scrollbars hide until you scroll, depending on system settings.
  • Keep the hover color clearly different, so people know they can grab it.

Common mistakes

  • Removing the scrollbar on the page. People lose the visual cue of how long the page is.
  • Low-contrast thumbs. A light grey thumb on a white track is nearly invisible. Aim for 3:1.
  • Only styling WebKit. Firefox ignores ::-webkit-scrollbar; the standard properties cover it.
  • Thin bars on touch devices. Mobile browsers use overlay scrollbars anyway, so focus your styling on desktop.

For horizontal scrollers such as tables or code blocks, the same height value controls the horizontal bar, so check both directions in the preview before shipping.

Frequently asked questions

Why are the standard properties inside @supports not selector(::-webkit-scrollbar)?

Since version 121, Chrome and Edge support the standard scrollbar-color and scrollbar-width properties, and when they are set, they ignore ::-webkit-scrollbar styles completely. Wrapping the standard properties in that @supports block means Firefox uses them, while Chromium and Safari keep the more detailed ::-webkit-scrollbar design.

Can I make the scrollbar any width in Firefox?

No. Firefox only offers auto, thin and none. The pixel width applies to Chrome, Edge and Safari.

Is it OK to hide scrollbars?

Hiding them makes it harder to see that content scrolls and how much is left, and some people drag the scrollbar because scroll wheels or gestures are difficult for them. Hide scrollbars only where scrolling is obvious, such as a carousel with arrows.

How thick should a custom scrollbar be?

Thin scrollbars look neat but are hard to grab with a mouse. A visible thumb of at least 6–8px is a good minimum; the check warns below that.

Does styling the scrollbar affect performance?

No noticeable effect. Scrollbar styles are simple paint properties, so they're safe to use, though very heavy styling can look out of place in some operating systems.

Sources