How To Design Scrollbars With CSS

In today’s world there are two ways to style scrollbars:

1. The (today rather limited) standard way and
2. The (not so standard but more capable) WebKit way.

The Standard Way

Well, standard is - at this time - not the best term since “CSS Scrollbars Module Level 1” is still a working draft at W3C’s CSS Working Group. This explains why Firefox is, as of today, the only browser to partly support it. At the time of writing this Firefox would only respond to scrollbar-width and scrollbar-color.

scrollbar-color

Scrollbar-color accepts either the value auto, which is its default value or two color values; the first applies to the scrollbar thumb and the second applies to the scrollbar track.

So, if you want to style the scrollbar-color you would write something like this:

html {
    scrollbar-color: <color> <color>;
}

scrollbar-width

Scrollbar-width is, as the name suggests, the property to control the width of the scrollbar. The accepted values are auto, thin and none.

Looking at the syntax we would write something like this:

html {
    scrollbar-width: auto | thin | none;
}

scrollbar-gutter

In the future we will most likely also see scrollbar-gutter which allows authors to reserve space for the scrollbar so they can easier avoid unwanted changes in layout. You can test this feature in Chrome (88+) today if you enable the experimental web platform features flag in Chrome’s configuration.

Deprecated properties

If you stumble across older articles on other websites mentioning properties like scrollbar-face-color, scrollbar-base-color, scrollbar-arrow-color, scrollbar-shadow-color, scrollbar-3dlight-color - better forget these. These are deprecated and will not see the light as standard.

The WebKit Way

WebKit and Blink based browsers (like Safari, Chrome, Vivaldi and Edge) support an older vendor specific way of designing scrollbars. All pseudo-elements use the prefix -webkit - these are the ones that exist:

• ::-webkit-scrollbar
• ::-webkit-scrollbar-button
• ::-webkit-scrollbar-track
• ::-webkit-scrollbar-track-piece
• ::-webkit-scrollbar-thumb
• ::-webkit-scrollbar-corner
• ::-webkit-resizer

As you can see you do have more pseudo elements that can be styled which will give you more control over the design of the scrollbar.

If you want to dive a little deeper and even learn about more possibilities I’d recommend reading Dave’s post from 2009.

A Real World Example

Let’s assume we want to achieve the following:

• A scrollbar that’s a little narrower than default
• It should blend in with the page’s design
• It should have (almost) the same look cross browser (if supported) with only using CSS

First of all we’re defining some custom properties to make life a little easier:

:root {
    --main-bg-color: #121212;
    --main-text-color: #f5f5f5;
    --main-accent-color: #42B9FB;
}

Next we’re designing our scrollbars

/* Firefox, future CSS Standard */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--main-accent-color) var(--main-bg-color);
}

/* WebKit Browsers */
html::-webkit-scrollbar {
    width: 7px; /* this roughly equals the value thin from Firefox's interpretation of the value thin for scrollbar-width */
}

html::-webkit-scrollbar-thumb {
    background: var(--main-accent-color);
    border-radius: 15px; /* Firefox has rounded corners for the scrollbar thumb */ 
}

html::-webkit-scrollbar-track {
    background: var(--main-bg-color);
}

And this is what we’ll get with some basic HTML file

I’ve created a Code Pen which will show you everything I’ve done, so you can have a look at the complete code that went into it.