<div class="container">
  <div class="gradient_01"></div>
  <div class="gradient_02"></div>
  <div class="gradient_03"></div>
</div>

.container {
  width:100%;
  display:flex;
  font-weight:bold;
  text-transform:uppercase;
  color:brown;
  font-size:11px;
}
.gradient_01, .gradient_02, .gradient_03, .gradient_04 {
  display:flex;
  justify-content:center;
  align-items:center;
  width:25%;
  height:150px;
  margin:0 10px
}
.gradient_01 {
  background:#ffcc00;
  background-image:
    radial-gradient(
      circle at top left,
      #ffff00,
      #ffa500,
      #ff0000,
      #4b0082,
      #000000
    );
}

.gradient_02 {
  background:#ffcc00;
  background-image:
    radial-gradient(
      circle,
      #000000 13%,
      #ffa500 14%, 
      #ffff00 21%,
      #008000 28%,
      #ffffff 35%,
      #cccccc 65%,
      #ee82ee 70%
    );
}

.gradient_03 {
  background:#ffcc00;
  background-image:
    radial-gradient(
      circle at bottom center,
      black 49%,
      grey 50%,
      black 75%
    );
}