CSS Tricks: Custom styling for your scrollbars

Here is the simple code I use to style scrollbars in a web page. Simply add this code to your stylesheet:

::-webkit-scrollbar {
    width: 12px;

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 8px;

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

And customize it to fit the design that you want!

Meet the author

Libby Fisher is an experienced freelance web developer, recently relocated from Seattle to Boston, and passionate about developing websites that are both aesthetically appealing and intuitively usable - or as she prefers: "beautifully effective."

  • http://www.queensland-assignment.com assignments help

    Competition among local business hubs as well as the sporadic businesses are very much important in terms of making the item qualified along with productive in all the way. In order to make the business more progressive and effective this type of recognition among the entire business community worth in all the way. Therefore Spokane is the best part for the entire business hubs.

  • jett mould

    I think it is the most reliable information for student for their academics .I have something for students It is the most reliable and authentic assignment help review platform where students come to share feedback on assignment writing service provider websites.
    Top assignment help