How to make a custom scrollbar

Teile den Beitrag

Share on facebook
Share on linkedin
Share on twitter
Share on email

Hello friends! This time I am going to show you how to make a custom scrollbar in Elementor and the Hello Theme.

Step 1: Copy the code and place it in the custom CSS

/* width */
::-webkit-scrollbar {
width: 20px;
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px;
/* Handle */
::-webkit-scrollbar-thumb {
background: linear-gradient(#ED6030, #EC4E57);;
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #ee7601;

Step 2: Adjust values

You can adjust all the colors and shadows directly in the code. For instance if you want to use a linear background on hover too, than just copy the CSS from the handle and place it in the hover CSS.

Can I Use css-scrollbar? Data on support for the css-scrollbar feature across the major browsers from

Subscribe To Our Newsletter

Get updates and learn from the best


Möchten Sie Ihr Unternehmen pushen?

Schreiben Sie uns und bleiben Sie in Kontakt