What is the WebKit scrollbar thumb shadow?

The "WebKit scrollbar thumb shadow" refers to the visual styling applied to the scrollbar's thumb (the draggable part) in browsers that use the WebKit engine, such as Safari and older versions of Chrome.

Here's a detailed explanation:

1. Understanding Scrollbar Components

- **Scrollbar Track**: The background area of the scrollbar.
- **Scrollbar Thumb**: The draggable element within the scrollbar track.
- **Scrollbar Buttons**: The arrows or buttons at either end of the scrollbar (if present).

2. WebKit-Specific CSS Properties

WebKit provides proprietary CSS pseudo-elements and properties to style scrollbars:

::-webkit-scrollbar: Targets the entire scrollbar.
::-webkit-scrollbar-thumb: Targets the scrollbar thumb.
::-webkit-scrollbar-track: Targets the scrollbar track.

3. Adding a Shadow to the Scrollbar Thumb

To add a shadow to the scrollbar thumb, you can use the box-shadow CSS property within the ::-webkit-scrollbar-thumb pseudo-element. Here's an example:

::-webkit-scrollbar-thumb {
    background: #888; /* Scrollbar thumb color */
    border-radius: 4px; /* Rounded corners */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5); /* Inner shadow */
}
                        

**Explanation:**
- background: Sets the color of the scrollbar thumb.
- border-radius: Rounds the corners of the thumb for a smoother appearance.
- box-shadow: Adds an inset shadow to give the thumb a recessed look.

4. Cross-Browser Compatibility

While WebKit-specific properties are powerful, they are not standardized across all browsers. For broader compatibility, consider using standardized CSS scrollbar properties where supported or provide fallbacks.

5. Example in Context

Here's how you might style a custom scrollbar with a thumb shadow:

/* Width of the scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

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

/* Thumb */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}

/* Thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
                        

This CSS will create a scrollbar with a light gray track and a darker thumb that has a subtle inner shadow, enhancing its visual depth.

**Note:** Always test custom scrollbar styles across different browsers and devices to ensure a consistent user experience.

Learn more about this