CSS tip: Creating an elliptical gradient in a square container

6 June, 2012 § Leave a comment

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.

Tagged: ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading CSS tip: Creating an elliptical gradient in a square container at JAWS.

meta