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

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


One Request?

I worked hard on this post to help the blogging community. It would help me a lot if you consider sharing it on social media networks. Because Sharing Is Caring.. ♥️

Sharing Is Caring...
Avatar of ANAND

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

17 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
  4. Nice way to customize the website to CSS code. Your article is different from other website articles that are to good.
    I am also a blogger, and my website is nyasikho(dot)online

    Reply
  5. Sir jab me first time adsense ke liye apply kiya tha to approval mil gaya tha. Lekin 4 mahina tak me ad lagaya hi nahi apne website par kuch galat video dekh ke. Wrong information video dekha aur mera approval waps le liya Google. Lekin ab fir se adsense ke liye do baar apply kr chuka hu rejected kr diya gaya. Please sir check my website

    Reply

Leave a Comment