Scrollbars with CSS

How to style scrollbars with CSS?

In this tutorial, you will learn to style scrollbars with CSS to include color and width controls for scrollbars, as well as characteristics to influence their aesthetic appearance.

The thumb color and track color of a scrollbar are controlled by the scrollbar-color property.

Styling Scrollbars in Chrome, Edge, and Safari

The prefix pseudo-element -webkit-scrollbar is now available for customizing scrollbars in Chrome, Edge, and Safari.

For example that uses ::-webkit-scrollbar::-webkit-scrollbar-track, and ::webkit-scrollbar-thumb pseudo-elements:

body::-webkit-scrollbar {

    /* width of the entire scrollbar */
  width: 20px;               
}

body::-webkit-scrollbar-track {

    /* color of the tracking area */
  background: rgb(196, 196, 196);        
}

body::-webkit-scrollbar-thumb {
    
    /* color of the scroll thumb */
  background: linear-gradient(90deg, rgb(0, 81, 255), rgb(0, 251, 255));
  
   /* full round corners of the scroll thumb */
  border-radius: 30px;      

}


The output will look like this:

style scrollbars with CSS

Unfortunately, the W3C has formally abandoned this spec, and it will most likely be phased down over time.

Styling Scrollbars in Firefox

body {

/* "auto" or "thin" */
  scrollbar-width: thin;          

/* scroll thumb and track */
  scrollbar-color: rgb(0, 81, 255) rgb(196, 196, 196);    
}

The -webkit-scrollbar has some overlap with this specification. However, there is no way to change the padding or roundness of the “track thumb” right now.

Style scrollbars with CSS for all major browsers

You may make your CSS compatible with both the -webkit-scrollbar and CSS Scrollbars requirements.

scrollbar-width, scrollbar-color,::-webkit-scrollbar,::-webkit-scrollbar-track,::webkit-scrollbar-thumb are all used in this example:

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 20px;
}

*::-webkit-scrollbar-track {
  background: rgb(196, 196, 196);
}

*::-webkit-scrollbar-thumb {
  background-color: rgb(0, 81, 255);
  border-radius: 30px;
}

In this tutorial, you learned how to style scrollbars with CSS and how to make sure that your styles are accepted by most modern browsers.