[SOLVED] Make a radial gradients radius 200px

Make a radial gradients radius 200px

How would I make the radius 200px in width and height? I've read that this can be done in pixel units, but every attempt has failed.

background-image: -webkit-radial-gradient(75% 100%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: -o-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: -ms-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);
background-image: radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%)
background-image: -moz-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);

Solution

edit: Updated for modern syntax, I've left the original below for a record of the 2011 syntax

You can set both the radius and position the gradient in pixel values or any other valid length unit.

In the example below circle at 200px 200px is setting the center point of the circle to 200px across and 200px down, this could also be any value accepted by background-position such as left or top.

The next values are the color stops and are comma separated pairs of color length. Again any valid value of color and length would work red 10%, #333 10px and rgb(10,47,10) 1em would all be valid.

Values like px or em are absolute and percentage values would be relative to the gradient container.

.gradient-demo {
  width: 500px;
  height: 400px;
  background: radial-gradient(circle at 200px 200px, #fff 0px, #fff 100px, #ff7ae9 101px);
}

<div class="gradient-demo"></div>

Original Answer:

background-image:    -moz-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image: -webkit-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image:      -o-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image:     -ms-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
background-image:         radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);
In this example the '200px' is the size of the circle, any standard CSS units such as px, em or percentages are fine.

The '50px 100px' is the position of the centre of the circle, it works the same way as background-position so values like 'left top' are fine too.

There are a few online generators that can help you with all the vendor specific prefixes.

p.s. @Mohsen pixel values are fine, MDN says:

either a percentage between 0% and 100% or a length along the gradient axis

If you click on 'length' it says

The CSS syntax for length is a number followed immediately by a unit. Space between the number and the unit is not allowed.