JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

CSS

html {
  height: 100%;
}
body {
  background-color: #dfa7ca;
  overflow: hidden;
  height: calc(100% - 70px);
  background-image: -webkit-linear-gradient(270deg, #dfa7ca, #ffffff);
  background-image: -moz-linear-gradient(270deg, #dfa7ca, #ffffff);
  background-image: -o-linear-gradient(270deg, #dfa7ca, #ffffff);
  background-image: -ms-linear-gradient(270deg, #dfa7ca, #ffffff);
  background-image: linear-gradient(180deg, #dfa7ca, #ffffff);
  width: 100%;
}

JavaScript

var colorArr = ['#dfa7ca', '#f7c2b3', '#bae0f1', '#a6d6cb'];
var grFrom = colorArr[Math.floor(Math.random()*colorArr.length)];
var grTo = '#FFFFFF';


var wrapped = _.throttle(function(e){
  var x = e.pageX - this.offsetLeft;
	var y = e.pageY - this.offsetTop;
  var grFrom = colorArr[Math.floor(Math.random()*colorArr.length)];
	var xy = (x + y) / 8;
  var w = $(this).width(),
      pct = 360*(+e.pageX)/w,
      bg = "linear-gradient(" + xy + "deg,"+grFrom+","+grTo+")";
      $("body").css("background-image", bg);
},50)


$("body").mousemove(wrapped);