<div class="body">
  <div class="outline circle center-text">
    Go!
  </div>
  <div class="outline circle two-color center-text">
    Go!
  </div>
  
  <div class="outline circle three-color center-text">
    Go!
  </div>
  
  <div class="outline circle four-color center-text">
    Go!
  </div>
  
</div>

.body {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.outline {
  background: rgb(75, 75, 200);
  background: -webkit-radial-gradient(
    50% 50%,
    circle,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
  background: -moz-radial-gradient(
    50% 50%,
    circle,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
  background: -ms-radial-gradient(
    50% 50%,
    circle,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
  background: -o-radial-gradient(
    50% 50%,
    circle,
    rgb(75, 75, 200),
    rgb(0, 0, 75)
  );
  border: 1px solid #000;
  width: 100px;
  height: 100px;
}

.circle {
  border-radius: 50%;
}

.center-text {
  color: #000;
  font: bold 16px/6em "Helvetica Neue", sans-serif;
  text-align: center;
}

.mb {
  margin-bottom: 8px;
}

.two-color {
  background: radial-gradient(
    circle,
    #ff0000, 
    #000000
  );
}

.three-color {
  background: radial-gradient(
    circle at 30% 25%,
    rgb(255,0,0), 
    rgb(150,150,150) 50%, 
    rgb(0,0,0)
  );
}

.four-color {
  background: radial-gradient(
    circle at 25% 25%,
    rgb(255, 0, 0) 20px,
    rgb(150, 150, 150) 40px,
    rgb(0, 200, 0) 60px,
    rgb(0, 0, 0) 80px
  );
}