Gradient scroll

by microbians

HTML

<html>
<body>
<div class="blocker" style="background: rgb(10,10,10);"></div>
<div class="blocker" style="background: rgb(20,10,10);"></div>
<div class="blocker" style="background: rgb(30,10,10);"></div>
<div class="blocker" style="background: rgb(40,10,10);"></div>
<div class="blocker" style="background: rgb(50,10,10);"></div>
<div class="blocker" style="background: rgb(60,10,10);"></div>
<div class="blocker" style="background: rgb(70,10,10);"></div>
<div class="blocker" style="background: rgb(80,10,10);"></div>
<div class="blocker" style="background: rgb(90,10,10);"></div>
<div class="blocker" style="background: rgb(10,20,10);"></div>
<div class="blocker" style="background: rgb(10,30,10);"></div>
<div class="blocker" style="background: rgb(10,40,10);"></div>
<div class="blocker" style="background: rgb(10,50,10);"></div>
<div class="blocker" style="background: rgb(10,60,10);"></div>
<div class="blocker" style="background: rgb(10,70,10);"></div>
<div class="blocker" style="background: rgb(10,80,10);"></div>
<div class="blocker" style="background: rgb(10,90,10);"></div>
<div class="blocker" style="background: rgb(10,10,10);"></div>
<div class="blocker" style="background: rgb(10,10,20);"></div>
<div class="blocker" style="background: rgb(10,10,30);"></div>
<div class="blocker" style="background: rgb(10,10,40);"></div>
<div class="blocker" style="background: rgb(10,10,50);"></div>
<div class="blocker" style="background: rgb(10,10,60);"></div>
<div class="blocker" style="background: rgb(10,10,70);"></div>
<div class="blocker" style="background: rgb(10,10,80);"></div>
<div class="blocker" style="background: rgb(10,10,90);"></div>

<div class="blocker" style="background: rgb(10,10,10);"></div>
<div class="blocker" style="background: rgb(20,10,10);"></div>
<div class="blocker" style="background: rgb(30,10,10);"></div>
<div class="blocker" style="background: rgb(40,10,10);"></div>
<div class="blocker" style="background: rgb(50,10,10);"></div>
<div class="blocker"...

CSS

.blocker {
  display: block; 
  width: 100%;
  height:50px;
}
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 20px;
}

body::-webkit-scrollbar {
    width: 20px;
    background-color: #F5F5F5
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #FFF;
    background-image: -webkit-gradient(linear, 40% 0, 75% 84%, from(#d647c5), to(#1dda43), color-stop(.6, #ff0))
}