Style Browser scrollbar with gradients using Css

Wednesday, August 28, 2019

Browsers come with their default Scroll bar. There comes a situation, to style the scrollbar of the browser as our web app should attract user of every possible browser out there in the market.

Here is a css code that applies a gradient to the scrollbar.

	body::-webkit-scrollbar {
	width: 9px;
	}

	body::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	}

	body::-webkit-scrollbar-thumb {
	background-color: #6b0f1a;
	background-image: linear-gradient(315deg, #6b0f1a 0%, #b91372 74%);
	outline: 1px solid slategrey;
	border-radius: 10px;

	}

view raw scrollbar_styling-gradient_css.css hosted with ❤ by GitHub

But this doesn't work in Microsoft Edge and firefox, whereas in Chrome it works fine.

Here -WebKit-scrollbar refers to the scrollbar -Webkit-scrollbar-track refers to the part other than the scrollbar drag handle and -thumb refers to the handle.

Also read Boost your website quality and SEO using Lighthouse