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.
Top comments (2)
π
Unfortunately it's non-standard with no current plans to be standardised AFAIK. Only works on WebKit based browsers