Customize a website's scrollbar with CSS

Three lines of CSS can make your website's scrollbar look like macOS

Default scrollbar (left) and a customized one (right) in Chrome

The scrollbar takes up only a small slice of the browser, but as an interface designer it's not a detail I'm willing to ignore. If you obsess over details, this short tutorial is for you.

Start off

Customizing a website's scrollbar takes only a few lines in your stylesheet—no JavaScript required. Here's the CSS:

The ::-webkit-scrollbar pseudo-elements are a non-standard WebKit extension, so they ship with the -webkit- prefix and work in Chrome, Edge, Safari, Opera, and all Chromium-based browsers. Firefox doesn't implement ::-webkit-scrollbar, but since Firefox 64 (December 2018) it supports the standard CSS Scrollbars Module Level 1 — scrollbar-width and scrollbar-color. Covering both Chromium and Firefox is straightforward, and we'll do it below.

Internet Explorer reached end-of-life in June 2022 and no longer needs to be a concern when styling scrollbars.

Pseudo-elements

You can use seven different pseudo-elements to customize the scrollbar:

For this tutorial I used ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb. Each property accepts values inside the brackets.

Firefox and the standard CSS Scrollbars

Modern Firefox (and any engine that follows the spec) uses two standard properties instead of pseudo-elements:

/* Firefox / CSS Scrollbars Module Level 1 */
html {
  scrollbar-width: thin;                /* auto | thin | none */
  scrollbar-color: #888 transparent;    /* thumb  track */
}

• scrollbar-width: thin gives a macOS-style slim scrollbar.
• scrollbar-width: none hides the scrollbar entirely (while keeping the element scrollable) — the clean, cross-browser way to hide a scrollbar without the classic -webkit-scrollbar { display: none } hack.
• scrollbar-color takes two colors: thumb first, track second.

You can safely combine the two approaches in one stylesheet — WebKit browsers read the ::-webkit- rules and ignore the standard ones, and Firefox does the opposite.

Preventing layout shift with scrollbar-gutter

One more property worth knowing: scrollbar-gutter: stable reserves space for a scrollbar even when it isn't visible, so content doesn't jump when the scrollbar appears. Supported in Chrome 94+ and Firefox 97+.

html {
  scrollbar-gutter: stable;
}

CodePen

See it in action on CodePen. The original demo only styles WebKit scrollbars, so in Firefox the -webkit- rules are ignored and a small JavaScript fallback displays a note in the box — in a production site you'd combine it with scrollbar-width/scrollbar-color as shown above.

See the Pen customize-scrollbar by Hyouk Seo (@Spemer) on CodePen.

From my stylesheet

I used only three lines of CSS to style this site's scrollbar. No JavaScript needed.

See the live version on my website.

Applications

If you embed GitHub Gists on your site, you can also style their scrollbars. We can apply this method anywhere as long as we know the classname or ID of the element to style.

Captured from my website

Gist's snippet uses the classname .blob-wrapper, so we can target it with the CSS above.

Can I use?

When I first wrote this article in January 2018, caniuse.com reported only ~87% support for ::-webkit-scrollbar. The landscape has improved since: all Chromium-based browsers (Chrome, Edge, Opera, Brave, Samsung Internet) plus Safari ship the -webkit- pseudo-elements, and Firefox supports the standard scrollbar-width / scrollbar-color from version 64 onward. Between the two, you can style a scrollbar in virtually every browser that's still in use today. Check the latest stats for ::-webkit-scrollbar and CSS Scrollbars on caniuse.com.

Bottom line: use the -webkit- pseudo-elements for fine-grained styling in Chromium and Safari, and the standard scrollbar-width / scrollbar-color for Firefox. Ship both and your scrollbar will look consistent across every modern browser. Thanks for reading!