DEV Community

Cover image for How to make a beautiful gradient scroll bar with CSS
Dhairya Shah
Dhairya Shah

Posted on • Originally published at codewithsnowbit.hashnode.dev

How to make a beautiful gradient scroll bar with CSS

Introduction

In this article, we will explain how to make a custom scrollbar in CSS. Custom scrollbar using CSS is a very useful and important thing for a website. It makes the website more beautiful and attractive.

Let's gets started

Setting up HTML

Let's create a skeleton structure of the page,

<div class="container">
  <div class="box">Scroll Down</div>
</div>
<div class="container">
  <div class="box">Hello World</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Styling the layout

Let's set the height of the box to 100% in order to create the scroll.

body{
  background: #10172A;
  color: white;
  height: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.box{
  height: 100%;
  font-size: 40px;
}
Enter fullscreen mode Exit fullscreen mode

Here's quick glance,

It's time to make scroll bar gradient 🌈

/* Gradient Scroll Bar */

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

/* Track */
::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: #1f2937;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234));
}
Enter fullscreen mode Exit fullscreen mode

Here's the final look of the scroll bar,

Conclusion

I hope you enjoyed this tutorial on making a custom CSS gradient scroll bar. Whatever it may be, I hope that you will be able to use this CSS code to make your website look awesome. Please share this tutorial with your friends, and always feel free to contact us if you have any questions.

Recently, I have launched a new product feel free to check it out,

Let's Lorem Ipsum -
It is a tool that generates placeholder texts. It helps UX designers, visual designers, and copywriters to create great content.

Let's connect

Top comments (2)

Collapse
 
amircahyadi profile image
Amir-cahyadi

👍

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Unfortunately it's non-standard with no current plans to be standardised AFAIK. Only works on WebKit based browsers