0

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.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
Malika Arora
  • 81
  • 3
  • 7

0 Answers0