How to make a custom scrollbar

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 caniuse.com.