$white: #fff;
$blue: #1e90ff;
$green: #39d24a;
$yellow: #ffe244;
$pink: #ff36a3;

body {
  height: 100vh;
  overflow: hidden;
  
  // I do like these colours
  /* background: 
    radial-gradient(circle at bottom, #fff -30%, transparent 70%),
    linear-gradient(to right, #134a8e, #00b6f1 50%),
    #fff; */
  
  background: 
    radial-gradient(circle at bottom, $white, transparent 80%),    
    linear-gradient(to top, dodgerblue 0%, transparent 70%),    
    linear-gradient(to bottom, transparent, rgba($white, 0.4) 70%),
    $blue;  
  animation: bg 30s infinite;
}

@keyframes bg {
  0%, 100% { background-color: $blue; }
  25% { background-color: $green; }
  50% { background-color: $yellow; }
  75% { background-color: $pink; }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.