Radial gradients are circular or elliptical gradients. Rather than proceeding along a straight axis, colors blend out from a starting point in all directions.
A simple circular gradient to illustrate the standard syntax:
snippet
background-image: -moz-radial-gradient(<background-position>, <shape & size>, <start color>, <end color>);
| <background-position> | position for the center of the gradient.You can use values, percentages, or keywords to set the gradient’s position |
| <shape & size> | shape and size of the gradient |
| <start color> | |
| <end color> | |
All the results of the below three are identical.
snippet
background-image: -moz-radial-gradient(#FFF, #000);
background-image: -moz-radial-gradient(center, #FFF, #000);
background-image: -moz-radial-gradient(center, ellipse cover, #FFF, #000);
| <shape> | The shape can take one of two values, circle or ellipse, with the latter being the default. |
| <size> | You can use one of the following values: (closest-side, closest-corner, farthest-side, farthest-corner, contain, cover) |
| closest-side | The gradient’s shape meets the side of the box closest to its center (for circles), or meets both the vertical and horizontal sides closest to the center (for ellipses). |
| closest-corner | The gradient’s shape is sized so it meets exactly the closest corner of the box from its center. |
| farthest-side | Similar to closest-side, except that the shape is sized to meet the side of the box farthest from its center (or the farthest vertical and horizontal sides in the case of ellipses). |
| farthest-corner | The gradient’s shape is sized so that it meets exactly the farthest corner of the box from its center. |
| contain | A synonym for closest-side. |
| cover | A synonym for farthest-corner. |
Example
snippet
background-image: -moz-radial-gradient(30px 30px, circle farthest-side, #FFF, #000 30%, #FFF);
Positioning the Gradient
snippet
background-image: -moz-radial-gradient(30px 30px, #FFF, #000);
It will place the center of the gradient
- 30 pixels from the top
- 30 pixels from the left of the element
