
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).

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.
Related: How to hide scrollbar using CSS?