Custom Scrollbar with CSS

The browsers set a default style for the scrollbars on the web pages. You can customize the scrollbar style and override the scrollbar style using CSS pseudo-element. The ::-webkit-scrollbar pseudo-element helps to customize the scrollbar style with CSS.

The custom scrollbar is very useful to match the scrollbar style with the webpage design. In this example code snippet, we will create custom scrollbar with CSS. We have used a specific color for the scrollbar track and thumb, you can set any color in CSS as per your web page styles.

CSS Code:

/* scrollbar */
::-webkit-scrollbar {
    width: 20px;
}

/* scrollbar track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}
 
/* scrollbar thumb */
::-webkit-scrollbar-thumb {
    background: #015bea; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #0254d1;
}

HTML Code:

<div style="height: 250px;overflow-y: scroll;">
    <h2>Create Custom Scrollbar with CSS</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>