Get Ready Elementor Templates

How to make Custom Scroll Bar in Elementor & WordPress

Subscribe To My YouTube Channel For More Upcoming Videos

Custom Scroll Bar CSS

::-webkit-scrollbar{
    width: 0.9vw;
    background: #777;
}
::-webkit-scrollbar-thumb{
    background: -webkit-linear-gradient(transparent,#30ff00);
    background: linear-gradient(transparent,#30ff00);
    border-radius: 20px;
}

Custom Scroll Bar Hover CSS

::-webkit-scrollbar-thumb:hover{
   background: -webkit-linear-gradient(transparent,#00c6ff);
   background: linear-gradient(transparent,#00c6ff); 
}

Custom Scroll Bar CSS(Firefox)

/*Firefox Support*/
html{
    scrollbar-width: thin;
    scrollbar-color: red green;
}
Wanna join my secret winners’ gang?

I only share these secrets with the people in this group. Honestly, you can not find such tricks for FREE on the whole internet!

  • Money Making Blog Tricks
  • $100k by Freelancing Formula
  • Secret Resources
  • Rich Dad business tactics
  • And, of course about my upcoming videos and plans