<section>
       <h1>Gradient Scroll</h1>
       <br>
       <article>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi proin sed libero enim sed. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper. Id interdum velit laoreet id. Pulvinar sapien et ligula ullamcorper malesuada proin libero. Mauris cursus mattis molestie a iaculis at erat. Duis at consectetur lorem donec massa sapien faucibus et molestie. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Urna neque viverra justo nec ultrices dui sapien eget mi. Condimentum lacinia quis vel eros donec ac odio tempor orci. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Et malesuada fames ac turpis egestas. In pellentesque massa placerat duis ultricies lacus sed turpis. Tristique nulla aliquet enim tortor at auctor. Sem viverra aliquet eget sit amet tellus cras adipiscing enim. Eu nisl nunc mi ipsum faucibus.
<br> <br>
        Nisi porta lorem mollis aliquam ut porttitor leo a. Arcu non odio euismod lacinia at quis risus sed. Non odio euismod lacinia at. Ut lectus arcu bibendum at varius vel. Sapien eget mi proin sed libero enim sed. Blandit massa enim nec dui nunc. Enim nec dui nunc mattis enim ut tellus. Suscipit tellus mauris a diam maecenas sed enim ut sem. Viverra justo nec ultrices dui sapien eget mi proin. Nisl rhoncus mattis rhoncus urna neque viverra.
        <br><br>
          Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Non arcu risus quis varius. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Proin gravida hendrerit lectus a. Odio ut enim blandit volutpat. Nec ullamcorper sit amet risus nullam. Vulputate mi sit amet mauris commodo. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Leo urna molestie at elementum eu. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius.
        <br><br>
        Pellentesque elit eget gravida cum sociis natoque. Semper eget duis at tellus at urna condimentum mattis. Nullam non nisi est sit amet facilisis magna etiam tempor. A lacus vestibulum sed arcu non odio euismod. Neque egestas congue quisque egestas diam in arcu. Massa vitae tortor condimentum lacinia quis vel eros donec. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Amet est placerat in egestas erat. Ullamcorper sit amet risus nullam eget. Odio ut enim blandit volutpat. Placerat duis ultricies lacus sed turpis tincidunt. Fringilla urna porttitor rhoncus dolor purus non enim.
        <br>
        Tempus imperdiet nulla malesuada pellentesque. Convallis aenean et tortor at risus viverra adipiscing. Viverra tellus in hac habitasse platea dictumst vestibulum. Elit ullamcorper dignissim cras tincidunt. Viverra maecenas accumsan lacus vel facilisis volutpat est. Varius sit amet mattis vulputate enim nulla aliquet. Et leo duis ut diam quam nulla. Sed faucibus turpis in eu. Sit amet cursus sit amet dictum sit amet justo donec. Fringilla phasellus faucibus scelerisque eleifend. Netus et malesuada fames ac turpis egestas sed.
        <br><br>
          Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Non arcu risus quis varius. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Proin gravida hendrerit lectus a. Odio ut enim blandit volutpat. Nec ullamcorper sit amet risus nullam. Vulputate mi sit amet mauris commodo. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Leo urna molestie at elementum eu. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius.
    </article>
   </section>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext");


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
    background: #000;
    color: #fff;
    padding: 20px;
}


section h1{
    color: #666;
    font-size: 34px;
}

::-webkit-scrollbar{
    width: 12px;
}

::-webkit-scrollbar-thumb{
    background: linear-gradient(148.46deg, #fffd87, #ff6677, #ff5f9a, #00d2ff);
    border-radius: 4px;
}


::-webkit-scrollbar-thumb:hover{
background: linear-gradient(148deg,#00d2ff,#ff5f9a,#ff6677,#fffd87);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.