<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
</div>

.container {
  width:100%;
  height:100%;
}

.container div {
  width:500px;
  height:100px;
  margin: 80px auto;
  border-radius: 20px;
}

.div1 {
  background: linear-gradient(135deg, #CE9FFC 0%,#7367F0 100%);
}

.div2 {
  background: linear-gradient(135deg, #f6ab3e 0%,#8037f6 100%);
}

.div3 {
  background: linear-gradient(to right, #FF0000, #FFF200, #1E9600);
}

.div4 {
  background: linear-gradient(to right, #1CB5E0, #000046);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.