How to style scrollbar using CSS

Do you want to make the scrollbar more colorful & exceptional? You can do it very easily with CSS.

Before we move further, see the finished product (live demo).

scrollbar custom style — Scrollbar custom style

I wrote the following (below) CSS to change the color, size, and other styles of the scrollbar (that you see in the above picture):

html::-webkit-scrollbar {
  width: 30px;
  height: 30px;
}
html::-webkit-scrollbar-thumb {
  background: -webkit-gradient(linear,left top, left bottom,from(#ff8a00),to(#e52e71));
  background: linear-gradient(180deg,#ff8a00,#e52e71);
  border-radius: 30px;
  -webkit-box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
          box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
html::-webkit-scrollbar-track {
  background: linear-gradient(90deg, #F1F1F1, #F1F1F1 1px,#F1F1F1 0,#F1F1F1);
}

Now let me explain the code.

::-webkit-scrollbar pseudo act on the style of the browser scrollbar. And I assigned a fixed width & height of it.

However, it (::-webkit-scrollbar) does not work on every browser and mobile. But I tested on multiple browsers and found that it’s working on Chrome.

::-webkit-scrollbar-thumb is the handle that we drag. And I assigned a gradient color in my choice but you can choose whatever color or background or gradient you like. If you need inspiration, check this online gradient tool.

Finally, ::-webkit-scrollbar-track is the progress bar of the scrollbar and I assigned a background color.