Radial gradient starts at a single point and emanate outwards. Gradients are often used to simulate a lighting, which as we know isn't always straight, so they can be useful to make a gradient seem even more natural.

The default is for the first color to start in the of the element and fade to the end color toward the edge of the element. The fade happens at an equal rate no matter which direction. 

The following example represents a simple syntax for radial-gradient property:


selector {

      background: radial-gradient(shape size at position, start-color, ..., last-color);



The radial-gradient() function takes the following arguments:

  1. Shape - Shape of a gradient may be explicitly given by using the keywords circle or ellipse.  If you omit the shape, it defaults to circle if the size is a single length. In all other cases, it defaults to ellipse.
  2. Size - This determines the extent of the radial gradient, either using specific dimensions or keywords.  A circular gradient accepts only a single length, which sets its radius. An elliptical gradient accepts two values, which can be either lengths or percentages. The first value sets the  ellipse’s horizontal radius. The second one sets its vertical radius. Percentage values are relative to the width and height of the gradient box, respectively. Size can be set by using units or keywords. Following are values to choose from for the radial size:
    • closest-side - Positions the gradient so it touches the side or sides of the element nearest its center. If the shape is an ellipse, it meets the side in the horizontal and vertical.
    • farthest-side –This is the same as closest-side but the ending shape is based on the farthest side.
    • closest-corner - Positions the gradient so it touches the corner or corners of the element nearest its centre. If the shape is an ellipse, it meets the corner in the horizontal and vertical.
    • farthest-corner – This is the same as closest-corner but the ending shape is based on the farthest side.
    • contain – This is the same effect as closest-side.
    • cover – This is the same effect as farthest-corner.
  3. Position - You can position the gradient using a keyword followed by any expression that’s valid for the background position property. The default value of position is center.
  4. Color :-  Colors are assigned with a comma-separated list of colors with optional positions along the gradient ray starting at the center.
NOTE: By default, shape is ellipse, size is farthest-corner, and position is center.


Example of a radial-gradient shape value:

Example of a radial-gradient size values:

Example of a radial gradient position values:

Repeating radial gradients

The repeating-radial-gradient() function and its browser-specific equivalents work exactly the same way, as with the linear gradients, except that the property name carries ‘radial’ keyword As shown in the below example:


selector {

       background-image: repeating-radial-gradient(circle at 50% 100%, #FFEB79, #D9CC3C 5%);


See linear-repeating gradients for an example.

Transparency in radial gradients

Transparency in radial gradients is defined and behaves equally to that one used with the linear gradients and  it is explained in linear-gradient property chapter.


›› go to examples ››