Customize Scrollbar In Any Website Using CSS

Everyone knows that the default scrollbar in any website is not attractive and beautiful. So let’s try to customize and change the styling of the scrollbar. So visitors can get a great experience while visiting your website.

*::-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, #1FA2FF 0%, #12D8FA 51%, #1FA2FF 100%);
}

Copy and Paste this code into additional CSS of your website and save it.


Share on:

Leave a Comment