How to make a beautiful gradient scroll bar with CSS

#css #webdev #react #javascript

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>

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;
}

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));
}

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

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now