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

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.CategoriesGeneratePress

How To Detect Ad Blocker In WordPress Website

Cloudways Promo Code February 2025 To Get 40% Discount For 3 Months