This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

How to make a beautiful gradient scroll bar with CSS


On this article, we’ll clarify easy methods to make a customized scrollbar in CSS. Customized scrollbar utilizing CSS is a really helpful and necessary factor for a web site. It makes the web site extra lovely and enticing.



Let’s will get began



Organising HTML

Let’s create a skeleton construction of the web page,

<div class="container">
  <div class="field">Scroll Down</div>
</div>
<div class="container">
  <div class="field">Hi there World</div>
</div>
Enter fullscreen mode

Exit fullscreen mode



Styling the structure

Let’s set the peak of the field to 100% so as to create the scroll.

physique{
  background: #10172A;
  colour: white;
  peak: 100%;
  font-family: ui-monospace, SFMono-Common, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.container{
  show: flex;
  justify-content: heart;
  align-items: heart;
  min-height: 100vh;
}
.field{
  peak: 100%;
  font-size: 40px;
}
Enter fullscreen mode

Exit fullscreen mode

This is fast look,



It is time to make scroll bar gradient 🌈

/* Gradient Scroll Bar */

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

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

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

Exit fullscreen mode

This is the ultimate look of the scroll bar,



Conclusion

I hope you loved this tutorial on making a customized CSS gradient scroll bar. No matter it might be, I hope that it is possible for you to to make use of this CSS code to make your web site look superior. Please share this tutorial with your pals, and at all times be happy to contact us in case you have any questions.

Just lately, I’ve launched a brand new product be happy to test it out,

Let’s Lorem Ipsum
It’s a device that generates placeholder texts. It helps UX designers, visible designers, and copywriters to create nice content material.



Let’s join

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?