Designing Pure CSS Smart Scrollbar

  • Post last modified:May 12, 2022
  • Reading time:3 mins read
  • Post category:Programming

A custom css smart scrollbar help to provide a different look to your website

Hello everyone ✋✋, in this short article I’ll show you how you can create a custom scrollbar in your website for an attractive look.

Why custom scrollbar ?

Custom scrollbar is part of attractive looking website designs. You can use it according to your website requirement.

How to design CSS Smart Scrollbar ?

I’ve designed it with pure css by selecting whole html block. Follow these steps to create it.

Step – 1

Select scrollbar element and set custom height and with as you want. I have used here 20px width for vertical scrollbar.

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

Step – 2

Now style scrollbar thumb, you may customize it according to your requirement.

::-webkit-scrollbar-thumb {border-radius: 30px; background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60)); box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);}

Step – 3

Now style the track of scrollbar with the given codes.

::-webkit-scrollbar-track {background-color: #fff; background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17); }

Result :

The result will look like this.

See the Pen CSS smart scroll bar by XNetKing (@xnetking) on CodePen.

Leave a Reply