How to create a Custom scrollbar using only CSS in 4 easy steps

This tutorial will teach you how to create your custom scrollbar using only CSS.

But first, why should you create a custom scrollbar?

The answer is quite simple - the default scroll bar is ugly and does not go with the theme of any website! Moreover, a custom scroll adds uniqueness to your website.

You can see the difference for yourself!

Scrollbar comparison.png

Few things to know about Scrollbars

Before customizing our scrollbar, we should know some technical terms related to scrollbars. Don't worry, there are only two things we are concerned with most of the time - the scrollbar track and the scrollbar thumb

Scrollbar parts.png

Scrollbar Track: In simple words, it is the background of the scrollbar
Scrollbar Thumb: It is the button that we click and drag to scroll. It indicates the current scroll position.

Let's begin!

Open up your index.css file
Change the width of your scrollbar: I feel that the default scroll bar is too wide. So if you want to change the width of your scrollbar, add the following syntax to your code. I found 10px is the sweet spot.
```
::-webkit-scrollbar {
width: 10px; 
}
```
Change the color of the track: Add the following code to change the track color of the scrollbar. I find a darker version of white or a light version of your primary color works best for this.
```
::-webkit-scrollbar-track {
background-color: whitesmoke;
}
```
Change the color and border radius of the thumb: Add the following code to change the color of the thumb of your scrollbar, usually, to the primary color of your site.
```
::-webkit-scrollbar-thumb {
background-color: lightgreen;
border-radius: 0.5rem;
}
```
And you're done!