<div class="container">
  <div class="box">
    <p>Watch</p>
  </div>
  <div class="box">
    <p>the</p>
  </div>
  <div class="box">
    <p>shadows</p>
  </div>
  <div class="box">
    <p>and</p>
  </div>
  <div class="box">
    <p>gradient</p>
  </div>
  <div class="box">
    <p>shift</p>
  </div>
  </div>
html {
  height: auto;
  min-height: 100%;
}
body {
  height: 100%;
  background: blue; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(45deg, #00d0ff, #00d0ff, #fffc60); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(45deg, #00d0ff, #00d0ff, #fffc60); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, #00d0ff, #00d0ff, #fffc60); /* For Firefox 3.6 to 15 */
  background: linear-gradient(45deg, #00d0ff, #00d0ff, #fffc60); /* Standard syntax (must be last) */
  background-repeat: no-repeat;
  background-attachment: fixed !important;
}
.box {
  height: 400px;
  max-width: 600px;
  margin: auto;
  margin-top: 100px;
  background-color: white;
  border-radius: 10px;
  box-shadow: -20px 20px 15px #2d2d2d;
}
.box:last-child {
  margin-bottom: 200px;
}
.box p {
  text-align: center;
  line-height: 400px;
}
$(document).ready(function() {
  var totalHeight = $(document).height();

  var boxes = $(".box");
  var body = $("body");
  $(window).scroll(function() {

    var end = totalHeight - window.innerHeight;
    var currentPos = window.scrollY;
    var pagePercent = (currentPos / end * 10).toFixed(2); // 0 - 10
    var shadowX = Math.round( -20 + 4 * pagePercent );
    var shadowProp = shadowX + "px 20px 15px #2d2d2d";

    var gradX = Math.round(-1 * (pagePercent - 5) * 9);
    var gradProp = gradX + "deg, #00d0ff, #00d0ff, #fffc60";
    boxes.css("box-shadow", shadowProp);
    body.css({
      "background": "blue", /* For browsers that do not support gradients */
      "background": "-webkit-linear-gradient(" + gradProp + ")", /* For Safari 5.1 to 6.0 */
      "background": "-o-linear-gradient(" + gradProp + ")", /* For Opera 11.1 to 12.0 */
      "background": "-moz-linear-gradient(" + gradProp + ")", /* For Firefox 3.6 to 15 */
      "background": "linear-gradient(" + gradProp + ")" /* Standard syntax (must be last) */
    });
  });

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js