I wish to use dynamic gradient in scroll bar but it doesn't seem to work.
/* Gradient Scrollbar */
body::-webkit-scrollbar {
width: 20px;
}
body::-webkit-scrollbar-thumb {
background-image: linear-gradient(to right, #ee7752, #e73c7e, #23a6d5, #23d5ab);
animation: scroll-gradient 5s ease infinite;
background-size: 200% 200%;
}
@keyframes scroll-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
body::-webkit-scrollbar-track {
background: #1c1b1b;
}
<body style="min-height: 800vh;"></body>
The animation is not working. Also, the code doesn't seem to work on Firefox. Please refer to the above code.