Change Scrollbar Color in CSS Websites

[yilmaz]

In this HTML and CSS tutorial, I will show you how to change and customize the side ScrollBar without using any JavaScript files. You will be able to create ScrollBar in the color and style you want. First we will have two files, index.html and style.css. Let's add basic HTML codes to index.html immediately.


We linked the style.css to the index.html page with the link tag. Since our goal in this tutorial is to replace the ScrollBar, I need to add a paragraph that will reveal the ScrollBar. Let's do this right away with the P tag, by adding Dummy Text to it. This is how we add Dummy Texts. And when I save this file, you will see the ScrollBar on the right. Now let's move on to the style.css file to customize this ScrollBar. First of all, I added a body tag and gave the margins to make the page look nicer. I opened the lines. Now let's use the Justify code, where we justify the texts on both sides. So it will look more organized. Now that we have prepared the page in general, we can move on to customizing the ScrollBar. To customize the ScrollBar, we will use some codes on CSS and try these codes to see what they do. Primarily covering the scrollbar in general. We are adding the Webkit ScrollBar feature. We can apply different parameters to this property, let's start with the Background first. When we assign black color to the Background property, the scroll bar will be black as you can see here. The point where we hold the scrollbar will not be visible at the moment. Because right now we haven't determined it yet.


I transfer the ScrollBar color by choosing a color from here. Let's add a color like this and we'll make the slider even darker. Now let's set its width. We will use the width value, if you want it to be thin, we can use 10 pixels or if we want it to be thicker, we can increase the number here. Let it stay at 14 events for now.

::-webkit-scrollbar {
    background: #95a5a6;
    width: 14px;
}
::-webkit-scrollbar-thumb {
    background: #2c3e50;
}

Demo 1:

/* width */
::-webkit-scrollbar {
  width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #2c3e50; 
  border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

Demo 2