How To Create Custom Scrollbar in CSS

In this HTML and CSS tutorial, I will show you how to customize the scrollbar without using any JavaScript files. You will be able to create scroll bar 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 style.css to index.html page with link tag.

body {
    margin: 40px;
    line-height: 24px;
}

p {
    text-align: justify;
}

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

::-webkit-scrollbar-thumb {
    background: #2c3e50;
}

To customize the Scroll bar, we will use some codes on CSS. We add the webkit-scrollbar feature that covers the scrollbar in general. We can apply different parameters to this property.