Try it Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <style>
     .farthest-rad-grad {
      height: 70px;
      width:300px;
      border-radius:20px;
      background: radial-gradient(farthest-side at 30%, blue, skyblue, pink); 
     }
      
     .closest-rad-grad {
      height: 70px;
      width:300px;
      border-radius:20px;
      background: radial-gradient(closest-side at 30%, blue, skyblue, pink);
      }
    </style>
  </head>
  <body>
    <h2>Radial Gradients farthest and closest Side</h2>
    <h3>Farthest Side</h3>
    <div class="farthest-rad-grad"></div>
    <br><br>
    <h3>Closest Side</h3>
    <div class="closest-rad-grad"></div>
    <br>
  </body>
</html>
​