CSS tip: Creating an elliptical gradient in a square container

Creating an elliptical background gradient in a square container isn’t the most straight-forward in CSS. This is simple to do if you can change the shape of the container, but requires using a separate CSS property to change the shape of the gradient.

To change the shape of the radial gradient, you can use the background-size property to change the bounding box of the background-image.

div {
  width: 200px;
  height: 200px;
  background-image: -moz-radial-gradient(center, closest-side, red, blue);
  background-color: violet;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100px 200px;
}

See the page on background-size at MDN for more information.