Create custom scrollbars using CSS

Having a custom scrollbar can help tie the branding of a site together on the page, as well as help it match an app as well, and it's really easy to do!

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:03 - The basics of custom scrollbars
03:18 - Hover effects on your scrollbar
03:58 - Changing the shape and making it look a bit nicer
06:01 - Targetting specific scrollbars
06:58 - Vertical scrollbars
08:23 - Browser support
12:07 - Things to avoid!

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[zachjensz]

This really raises the bar for scrolling

[BNizam]

I love how you actually demonstrate multiple options instead of just a plain tutorial.

[_ap__]

I love Kevin's professionalism and premium style tutorials.

[KiwisCode]

While working on my portfolio project around 1 AM, I stumbled upon this video on how to beautify my scrollbar, and it's amazing! I'm really happy that you paid attention to these kinds of details. It was truly helpful and came just in time for me.

[juditturcsanyi]

Great video (as always)! The Firefox part is exactly what I needed today 🙏

[graaam]

6:36 "vertical-scroll" - affects the bit that scrolls horizontally 🤣 Pretty sure that is right out of my playbook of goofs!

[adityasagar]

So easy to understand and so professional, you made my website look good

[ranjoyguhathakurata]

hey Kevin I love you. You dont know how good you are.Superb teacher. So much skill in css.Truely CSS king.Learned a lot from your videos and keep learning.

[BrianHHough]

This is a fantastic tutorial, thank you for making this!! Helped me so much!

[jesusrdeleon]

CSS has evolved so much... what is your recommendation to learn the essential basics and the latest useful tricks. PS: of all the YouTubers, I find you the most useful. Big thanks and keep it the great content. The fact that your screenshot show the final product and you describe what will be accomplish is what attracts me the most to your videos..

[Bobnator]

Awesome video man! You make it so easy to understand

[thefaulenzer]

Thank you so much! I really enjoy watching your videos to learn something new :D

[rnwonder]

Amazing stuff as always, thanks a bunch for this, I learnt a lot!

[yTheuszss]

Hi man, you saved me from a mess I was in for hours, thank you

[MarcHoekstra]

You can use a transparent border in combination with "background-clip: content-box;" to move the scrollbar away from the side. In combination with "overflow: overlay;" on your html element this looks great, even if your page background isn't a static color!

[gusober]

I learn so much with kevin powell, thanks

[akifahmed]

Very informative video. I was looking for customising scroll bar and stumbled upon this video 😁

[AttackHelicopter]

5:55 you can also have transparent border for thumb combined with background-clip: padding-box
so you don't have to care about track color, if you just want to have "padding" for thumb

[ighsight]

Timely input by the algorithm, was struggling with this yesterday.

[rpwn-dev]

Fun fact: in addition to :hover, you can also use :active on the thumb to style it differently (make it even darker) when the user's mouse button is pressed