JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="background"></div>
</div>

CSS

#parent {
  background-color:white;   
   position: relative;
   overflow:hidden;
}
#background {
     position:absolute;
     top:0px;
     left:0px; 
     width:100%;
}
.gradient {
     /* background-color:grey; */
     height:0.2em;  
     width:100%;
     z-index:-1;
}
.content {
 position:relative;   
}

JavaScript

for(i = 0; i < 10;i++)
{
  div = $('<div class=content></div>');
  div.html("CONTENT CONTENT CONTENT");
  div.css("opacity", 1 - 0.1 * i);
  div.appendTo("#parent")
}
for(i = 0; i < 100;i++)
{
  div = $('<div class=gradient></div>');
  div.css("opacity", 1 - 0.01 * i);
  div.appendTo("#background")
}