Custom Scroll Bar CSS with Gradient Effect

Custom Scroll Bar CSS

::-webkit-scrollbar{
width: 0.9vw;
background: #DE81A0;
}
::-webkit-scrollbar-thumb{
background: -webkit-linear-gradient(transparent,#710D3A);
background: linear-gradient(transparent,#710D3A);
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;
}