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

4.7/5 - (23 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.

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

  1. Brother apki video bahut hi achhi hoti hai aur bahut valuable information ap dete hai jo shayad youtube pe koi ni deta…Keep growing .. lots of love to your work..
    And sir if possible please make a video on off page seo..The best off page seo techniques and also how to use H1 H2 tags… Kya ek post me heading tag repeat ho sakte hai ya best arrangement kya hona chahiye

    Reply
  2. Sir, my website mobile view is not perfect and I need to do some optimization. Please check my website and inform me how can I resolve the issue.

    Reply
  3. Sir Generatepress theme mein Back to Top Button is not working how will i do.
    Please Tell us iss par video banao sir.

    Reply

Leave a Comment

Limited Time Offer
10% Discount on WP rocket
10
days
10
hours
10
minutes
10
seconds
Hurry! The Offer Will Expire In
Limited Time Offer
10% Discount on Rank math Pro
10
days
10
hours
10
minutes
10
seconds
Hurry! The Offer Will Expire In
Copy This Code And Click On Claim Now
Increase Your Website Speed With Cloud Hosting (Limited Time Deal)
10
days
10
hours
10
minutes
10
seconds
Increase Your Website Speed With Cloud Hosting
10
days
10
hours
10
minutes
10
seconds