<div class="colorlist clearfix">
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
  <div class="box box3">box3</div>
  <div class="box box4">box4</div>
  <div class="box box5">box5</div>
  <div class="box box6">box6</div>
</div>
.box{
  width:48%;
  height:300px;
  line-height:300px;
  text-align:center;
  color:#fff;
  font-weight:bold;
  float:left;
  margin:10px 1%;
}
.box1{
  background:linear-gradient(0deg, rgba(255, 175, 56,1) 20.014116646039604%,rgba(255, 222, 222,1) 80.01566367574256%);
}
.box2{
  background:linear-gradient(90deg, rgba(138, 147, 255,1) 20.014116646039604%,rgba(222, 249, 255,1) 80.01566367574256%);
}
.box3{
  background:linear-gradient(128deg, rgba(243, 72, 104,1) 30%,rgba(237, 66, 113,1) 33%,rgba(158, 0, 236,1) 82%);
}
.box4{
  background:linear-gradient(58.647640797324925deg, rgba(255, 140, 255,1) 15.075433354866496%,rgba(255, 139, 253,1) 15.075433354866496%,rgba(255, 97, 176,1) 32.12491083925496%,rgba(255, 10, 59,1) 54.00931477444015%,rgba(237, 169, 81,1) 71.65255515629487%,rgba(255, 111, 8,1) 96.50577357881136%);
}
.box5{
  background:linear-gradient(90deg, rgba(138, 147, 255,1) 20.014116646039604%,rgba(222, 249, 255,1) 80.01566367574256%);
  border-radius:200px;
}
.box6{
  background:linear-gradient(128deg, rgba(243, 72, 104,0.5) 30%,rgba(237, 66, 113,0.6) 33%,rgba(158, 0, 236,0.7) 82%);
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.