Customize Scrollbar In Any Website Using CSS | Custom Scrollbar In WordPress

4.5/5 - (10 votes)

This post is all about how to modify and customize the scroll bar in WordPress or any other kind of website using custom CSS only.

Everyone knows that the default scrollbar in any website is not appealing and attractive. So I have decided to customize and change the styling of the scrollbar so visitors can experience great while visiting your blog or website.

CSS Code

Please copy the below code and paste it into your Additional CSS Box. You can change the color if you want, just play with the numbers.


*::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;margin-left:-10px!important;
}

*::-webkit-scrollbar
{
	width: 10px;
	margin-left:-10px;
	background-color: #F5F5F5!important;
}

*::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: linear-gradient(to right, #4CB8C4 0%, #3CD3AD 51%, #4CB8C4 100%);
}

Let me know if you have any questions or doubts about the comment section.


Sharing Is Caring...

An aspiring MCA student formed an obsession with Blogging, SEO, Digital Marketing, and Helping Beginners To Build Amazing WordPress Websites.

4 thoughts on “Customize Scrollbar In Any Website Using CSS | Custom Scrollbar In WordPress”

Leave a Comment