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.

Popular Tutorials

5 Awesome VS Code Plugins Useful in HTML

I have been using VS Code for a while now and I…

Animated SVG Icons: SVG Stroke Animation with jQuery

How to use animated SVG on your website? How about animating eye-catching…

HTTP Status Codes

Have you ever wondered what those mysterious status codes that appear in…

How to Create Animated Image Carousel with CSS

Image carousels are a great way to display multiple images in a…

Animated Underline Effect with HTML and CSS

The animated underline effect is a popular design trend that can add…

CSS Only: Create Stunning Image Hover Effects in Minutes

In this video, we’ll guide you through creating stunning image hover effects…