SOURCE

<div class="back"></div>
<div class="back1"></div>
<div class="back2"></div>

.back{
  width:500px;
  height:200px;
  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
.back1{
  margin-top:20px;
  width:500px;
  height:200px;
  background: linear-gradient(to bottom,#e66465, #9198e5);
}
.back2{
  margin-top:20px;
  width:500px;
  height:200px;
  background-image:linear-gradient(to left bottom, #9DC3E6 0%, #F4B183 25%, #C9C9C9 50%, #FFD966 75%, #A9D18E 100%);
}