<div class="layer bg1-0">
  <div class="layer">
    <div class="layer bg1-1 overlay"></div>
    <div class="layer bg1-2 left"></div>
    <div class="layer bg1-2 left"></div>
    <div class="layer bg1-3 right"></div>
    <div class="layer bg1-3 right"></div>
    <div class="layer bg1-4 left50"></div>
    <div class="layer bg1-4 right50"></div>
    <div class="layer bg1-4"></div>
  </div>
</div>

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.clearall {
  clear: both;
}

.layer {
  height: 100%;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.left {
  width: 75%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white !importantx;
}

.right {
  width: 75%;
  position: fixed;
  top: 0;
  left: 25%;
  background-color: blue !importantx;
}

.left50 {
  width: 50%;
  position: fixed;
  top: 0;
  left: 0;
}

.right50 {
  width: 50%;
  position: fixed;
  top: 0;
  left: 50%;
}

.bg1-0 {
  background: linear-gradient(
    to right,
    rgba(5, 15, 85, 1) 0%, 
    rgba(35, 45, 135, 1) 10%,
    rgba(88, 21, 132, 1) 32%,
    rgba(145, 14, 115, 1) 50%,
    rgba(185, 125, 1, 1) 100%
  );
}

.bg1-1 {
  background: -moz-radial-gradient(
    center center,
    ellipse closest-side,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 85%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

.bg1-2 {
  background: -moz-radial-gradient(
    10% center,
    ellipse farthest-side,
    rgba(65, 75, 165, 0.99) 0%,
    rgba(25, 10, 50, 0.25) 60%,
    rgba(5, 15, 85, 0) 100%
  );
}

.bg1-3 {
  background: -moz-radial-gradient(
    70% 30%,
    ellipse farthest-side,
    rgba(235, 175, 105, 0.7) 0%,
    rgba(235, 175, 105, 0.3) 15%,
    rgba(185, 115, 15, 0.15) 30%,
    rgba(85, 20, 5, 0.1) 45%,
    rgba(85, 20, 5, 0.05) 90%,
    rgba(85, 20, 5, 0.0) 100%
  );
}

.bg1-4 {
  background: -moz-radial-gradient(
    center center,
    ellipse,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 80%,
    rgba(0, 0, 0, 0.35) 100%
  );
}