The WPFolks app is out on iPhone and Android. Free, no ads. Download on the App Store Get it on Google Play
Skip to main content
Login Join
Snippet · CSS

Custom Scrollbar

Shared by Mukesh Gujjar · August 10, 2026

35 views
Back to Snippets

Customize the appearance of scrollbars in WebKit browsers.

 

Usage

Add to your global stylesheet.

Note

Works in Chromium-based browsers and Safari.

::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}
Know a different way to do this? Add your approach as a variation so folks can compare them side by side.
Submit a variation

1 comment

  1. Amit Dholiya
    Amit Dholiya @amitdholiya

    Simple way to style the scrollbar so it matches your site’s design. It works in Chromium browsers and Safari, and the hover color on the thumb is a nice touch. For Firefox, you can pair it with scrollbar-width and scrollbar-color to get a similar look.

    Report

Proudly supported by