A demo of background gradient

The Code

<!DOCTYPE html>
<html>
<head>
 <style>
 body {
  background: #000;
}
h1 {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 48vh;
  color: #fff;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
  letter-spacing: .7em;
  font-size: 20pt;
  font-weight: normal;
  opacity: .2;
  text-transform: uppercase;
}
.div-gradient {
  position: absolute;
  width: .001vmin;
  height: .001vmin;
  border-radius: 50%;
  opacity: .25;
}
.div-gradient:nth-child(2) {
  box-shadow: 0 0 45vmax 45vmax magenta;
  -webkit-animation: hue 10s 0s linear infinite,
    move1 19s 0s linear infinite;
          animation: hue 10s 0s linear infinite,
    move1 19s 0s linear infinite;
}
.div-gradient:nth-child(3) {
  box-shadow: 0 0 45vmax 45vmax white;
  -webkit-animation: hue 15s 0s linear infinite,
    move2 25s 0s linear infinite;
          animation: hue 15s 0s linear infinite,
    move2 25s 0s linear infinite;
}
.div-gradient:nth-child(4) {
  box-shadow: 0 0 45vmax 45vmax cyan;
  -webkit-animation: hue 20s 0s linear infinite,
    move3 15s 0s linear infinite;
          animation: hue 20s 0s linear infinite,
    move3 15s 0s linear infinite;
  opacity: .2;
}
@-webkit-keyframes hue {
  0% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
@keyframes hue {
  0% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
@-webkit-keyframes move1 {
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}
@keyframes move1 {
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}
@-webkit-keyframes move2 {
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
    top: 100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}
@keyframes move2 {
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
    top: 100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}
@-webkit-keyframes move3 {
  0% {
    top: 100vh;
    left: 50vw;
  }
  25% {
    left: 100vw;
  }
  50% {
    top: 0vh;
  }
  75% {
    left: 0vw;
  }
  100% {
    top: 100vh;
    left: 50vw;
  }
}
@keyframes move3 {
  0% {
    top: 100vh;
    left: 50vw;
  }
  25% {
    left: 100vw;
  }
  50% {
    top: 0vh;
  }
  75% {
    left: 0vw;
  }
  100% {
    top: 100vh;
    left: 50vw;
  }
}

</style>
</head>
<body>

<h1>A demo of background gradient</h1>
<div class="div-gradient"></div>
<div></div>
<div></div>
</body>
</html>