CSS scrollbar-color Property

Last Updated : 09 Oct, 2024

The scrollbar-color CSS property sets the colors of the scrollbar track and thumb, allowing for customization of the scrollbar’s appearance. The thumb, the draggable part, can be styled globally by setting the property on the root element.

Syntax

scrollbar-color: auto | color | dark | light | initial | inherit;
/*
scrollbar-color: dark-shadow light-shadow;
*/

Property Values

Property	Description
auto	Sets the scrollbar color to the browser’s default. It is the default value for rendering the scrollbar.
color	Sets the scrollbar color to custom values. The first value applies to the scrollbar thumb, and the second applies to the scrollbar track.
light	Provides a lighter variant of the scrollbar, based on default or custom colors. Discontinued in all major browsers.
dark	Provides a darker variant of the scrollbar, based on default or custom colors. Discontinued in all major browsers.
initial	Resets the scrollbar color to its default value.
inherit	Inherits the scrollbar color from its parent element.

Examples of CSS scrollbar-color Property

Example: Here we are using the scrollbar-color property set to ‘auto’ in a styled container.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS scrollbar-color
    </title>
    <style>
        .scrollbar-auto {
            scrollbar-color: auto;

            height: 150px;
            width: 200px;
            overflow-y: scroll;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | scrollbar-color
    </b>
    <p>
        The container below has
        scrollbar-color set to
        'auto'.
    </p>
    <div class="scrollbar-auto">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
    </div>
</body>

</html>

Output:

scrollbar-color: auto:

Example 2: Here the scrollbar-color property, setting the scrollbar to red for the thumb and green for the track, within a light green container.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS scrollbar-color Property
    </title>
    <style>
        .scrollbar-colored {
            scrollbar-color: red green;

            height: 150px;
            width: 200px;
            overflow-y: scroll;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | scrollbar-color
    </b>
    <p>
        The container below has a
        red green scrollbar-color.
    </p>
    <div class="scrollbar-colored">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
    </div>
</body>

</html>