How To Change Browser Scrollbar colors using CSS?

How To Color Browser scrollbars using CSS

Coloring the browser scrollbars in line with the look and feel of your webpage is a nice touch that we can give. In most of the Laravel web apps that I develop, I do this to color the browser scroll bars to enhance the overall feel of the web app.

Let’s see how we can change the browser’s colors when our website / web application is opened.

Changing browser scrollbar colors

We can change the colors of the browser’s scrollbars by using the following 3 pseudo-elements:

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-thumb

The above 3 pseudo-elements represent the vertical scrollbar of the browser, the track of the scrollbar, and the small tab that moves on the track when we scroll, respectively.

Let’s see how we can actually use them in CSS to change the colors of our browser scrollbar.

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;

/* Handle */
::-webkit-scrollbar-thumb {
    background: #3c4fb8;

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #415FFF;

This simple bit of CSS code above will change the color of the browser’s scrollbar to any valid color that you use.

**Please note that the -webkit-scrollbar-* elements are not standard. So, the performance might not be consistent on all browsers.

Share This Post

Leave a Comment

Your email address will not be published. Required fields are marked *

Subscribe To my Future Posts

Get notified whenever I post something new

More To Explore