Make a radial gradients radius 200px

Question

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%);

Brod

Radius is half the diameter: if the radius was 200px then it would be 400px in width and height, so this question should be "radius 100px". – Communion

Answer 1

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.

Acrodont

Did you applied your CSS to an element? It's not valid – Tojo

Not working, it isn't valid css – Aleshia

@AshleyFernandes This is an answer from 12 years ago, things have changed a bit! You certainly don't need the vendor prefixed versions any more. Check the MDN link in the answer for the modern syntax. Something like background: radial-gradient(red 30px, yellow 200px, #1e90ff 300px) should work with pixel values – Acrodont

It would be helpful if you could edit the answer with the new values – Aleshia

@AshleyFernandes 👍 Have updated – Acrodont

The OP asked for a circle with radius 200px, but this CSS gives a circle with diameter 200px - using circle at 200px 200px says "there is a circle at (200,200)" but it does not actually define its size or radius - but the CSS here still works because gradient-images are (by default) sized to fit the element's box, which incidentally is 200px tall, so this code won't keep a constant-sized circle if the element is resized. – Communion