CSS scrollbar-color

The scrollbar-color property in CSS allows you to customize the colors of the scrollbar track and thumb in web browsers that support it. This can be a useful feature for enhancing the design of your website and making the scrollbar match your overall color scheme.

Here's an example of how you can use the scrollbar-color property:

Result:


    /* CSS */
    ::-webkit-scrollbar {
      width: 12px;
    }

    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
      background: #888;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #555;
    }

    /* Firefox */
    scrollbar-color: #f1f1f1 #888;

This code snippet will style the scrollbar with a gray track and a dark gray thumb. When the user hovers over the thumb, it will change to a darker shade of gray. This will work in webKit browsers (Chrome, Safari) and Firefox.

With the scrollbar-color property, you can customize both the background color of the track and the color of the thumb separately. This allows for more control over the appearance of the scrollbar on your website.