DEV Community

Cover image for How to make Custom Scrollbar using Pure CSS
Nishtha Neeraj Kushwah
Nishtha Neeraj Kushwah

Posted on • Edited on

1 1

How to make Custom Scrollbar using Pure CSS

Good Morning Dear Readers

So you are a web developer/designer and you are making awesome websites but the annoying scrollbar is destroying you website.
it can't destroy your website anymore
Because my Friend I'm here for you

So Let's Start

Github: https://github.com/nishthaneeraj/Custom-Srollbar-using-css
Live Demo: https://nishthaneeraj.github.io/Custom-Scroll-Bar-Using-Css/
Codepen:

Specify the width using:

::-webkit-scrollbar {
  width: 10px;
}
Enter fullscreen mode Exit fullscreen mode

then add background color using:

::-webkit-scrollbar-track {
  background-color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

then add the color of the trackbar using:

::-webkit-scrollbar-thumb {
  background-color: #e02f6b;
  border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

that's it !

if you have any issue the let me Know in the Comment Section.

Bye Good Day.

Thanks!

Top comments (0)

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay