<!DOCTYPE html>
<style>
  .box {
    display: inline-block;
    height: 100px;
    width: 200px;
    border: 1px solid black;
  }

  .radial1 {
    background-image: radial-gradient(ellipse, red -80%, -50%, green, blue, green, 150%, blue 170%);
  }

  .radial2 {
    background-image: radial-gradient(ellipse, red, 10%, green 100px, 60%, blue);
  }

  .radial3 {
    background-image: radial-gradient(ellipse, red, 10%, green, 60%, blue);
  }

  .radial4 {
    background-image: radial-gradient(ellipse, red 4em, 6em, green 10em, 11em, blue);
  }

  .radial5 {
    background-image: radial-gradient(ellipse, red 10px, 10%, green 50px, 60%, blue 100px);
  }

  .radial6 {
    background-image: radial-gradient(ellipse, red 5%, 100px, green 50%, 160px, blue 90%);
  }

  .radial7 {
    background-image: radial-gradient(ellipse, red, 10%, transparent, 90%, blue);
  }

  .radial8 {
    background-image: radial-gradient(ellipse, transparent, 10%, red, 90%, transparent);
  }

</style>

<div class="radial1 box"></div>
<div class="radial2 box"></div>
<div class="radial3 box"></div>
<div class="radial4 box"></div>
<div class="radial5 box"></div>
<div class="radial6 box"></div>
<div class="radial7 box"></div>
<div class="radial8 box"></div>