Style Browser scrollbar with gradients using Css

Posted by Adarshreddy Adelli

Add Comments

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.

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

Adarshreddy Adelli

As an Engineering Lead with deep expertise in Artificial Intelligence, Cybersecurity, and Systems Architecture, I guide teams in building innovative, secure, and scalable solutions.I am passionate about tackling challenging technical problems, fostering engineering excellence, and delivering solutions that balance innovation, security, and performance. I actively share knowledge through blogging and community engagement, contributing to the advancement of AI and cybersecurity practices.