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>

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

• Twitter
• GitHub
• YouTube
• Buy me a coffee

Comments

[Amir-cahyadi]

👍

[Jon Randy 🎖️]

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

[osirisgothra (osirisgothra)]

Hi, thanks for the post, it was interesting.

I have to say, this works in most of my use cases on modern browsers. But it ONLY works if the webpage is using controls that use the standard scrollbars in which those styles are read. :3

For example, YouTube is using its own tp-yt-element controls that read established css scrollbar properties/selectors but do not read the webkit or any other prefixed properties.

Therefore, You should only use this if you are going to be working with HTML elements you know will actually be reading them!

The good thing is that now, many modern browsers are now implementing engine-prefixed symbols (-moz and -webkit mainly) even outside their respective engines to ensure user experience doesn't end up suffering as a result.

Since Mozilla and Webkit (Chrome*) are the heavy hitters when it comes to establishing new and important properties, selectors, queries, etc, it is likely that -moz and -webkit will get treated the same in the future if not already!

• Chrome uses a fork of webkit which obviously uses the webkit code base, and Firefox uses the mozilla code base. Other browsers have extensions (-safari, -o (pera), and the antiquated -ms-) but really those are mostly artifacts of the past with little advantage in using them.

If browsers didn't use this, then everyone who didn't remember to use the -engine-property or properties that are celebrated on one browser would just not be available on others. Therefore, the need for implementation.

HOWEVER...This ONLY applies to nonstandard properties that are UNIQUE to that engine and show no signs of ever being drafted into CSS Level 3.

Also note that "engine-prefix" properties are far more likely to be supported outside of their intended engine than CSS selectors and far more than CSS queries (if that even happens, I've never really seen it outside browser extension ports, for example, -moz-document which technically appears as a query, though behaves much like a selector + query combination, but in reality is neither).

We also saw this happening around the time drop-shadow and text-shadow was introduced in -moz and -webkit. There was a big disparity before it was drafted in (mind you this is back when drafts were further apart), so devs would silently support it by "chopping off" the engine prefix and supporting it as if it had been drafted already. There's a whole lot less of that now, though, if any.

One case that might qualify in the future could be text-stroke, but who knows? I see support and/or drafting for scrollbar gradients and text-stroke taking far longer (in perspective) than box-shadow, filter, and text-shadow ever did.

Oh look at that I think I went and yapped a bit too much, lol...

*But thank you for this very interesting read. *