<!DOCTYPE html>
<!--
 | Non-centered radial gradient.  These are derived from example 19 here:
 | https://www.w3.org/TR/2012/CR-css3-images-20120417/#radial-gradients
 -->
<html>
<head>
  <style>
    body {
      background: blue;
    }

    .gradient1 {
      background: radial-gradient(closest-side, red, transparent, green);
      width: 400px;
      height: 250px;
    }
  </style>
</head>
<body>
  <div class="gradient1"></div>
</body>
</html>