JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div id="box"></div>

CSS

/*div {
    background:red;
    width:0px;
    height:0px;
    border-radius:50%;
    position:fixed;
    top:50%;
    left:50%;
}*/
div {
  /*background: -moz-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);*/
  background: -webkit-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  /*background: -ms-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  background: -o-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);*/
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body {
    height:1000px;
    margin:0px;
}

JavaScript

/*$(window).scroll(function() {
    $("#box").css({"width":$(window).scrollTop() + "px", "height":$(window).scrollTop() + "px", "margin-left": $(window).scrollTop()/-2 + "px", "margin-top": $(window).scrollTop()/-2 + "px"});
});*/

$(window).scroll(function() {
    var scrollh = $(window).scrollTop() + "px";
    $("#box").css("background", "-webkit-radial-gradient(transparent " + scrollh + ", rgba(0,0,0,1) " + scrollh + ")");
});