Radial gradient property (radial-gradient)

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:

Syntax:

selector {

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

}

Values:

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

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.
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.
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.
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.

Examples

Example of a radial-gradient shape value:

<!DOCTYPE html>
<html>
<head><style type="text/css">
h4 {
    font-family:Arial;
}
div 
{
    width: 90%; height: 100px; margin: 5%;
    background: radial-gradient(circle, #222, #eee, #777);
        background: -webkit-radial-gradient(circle, #222, #eee, #777); /* Safari */
        background: -o-radial-gradient(circle, #222, #eee, #777); /* Opera 11.6 to 12.0 */
        background: -moz-radial-gradient(circle, #222, #eee, #777); /* Firefox 3.6 to 15 
}
</style></head>

<body>

<h4>Radial gradient with "circle" shape example:</h4>

<div></div>

</body>
</html>

Example of a radial-gradient size values:

<!DOCTYPE html>
<html>
<head><style type="text/css">
h4 {
    font-family:Arial;
}
div 
{
    width: 90%; height: 100px; margin: 5%;
    background: radial-gradient(farthest-side at 60% 55%,red,yellow,white,black);
        background: -webkit-radial-gradient(60% 55%, farthest-side,red,yellow,white,black); /* Safari */
        background: -o-radial-gradient(60% 55%, farthest-side,red,yellow,white,black); /* Opera 11.6 to 12.0 */
        background: -moz-radial-gradient(farthest-side at 60% 55%,red,yellow,white,black); /* Firefox 3.6 to 15 
}
</style></head>

<body>

<h4>Radial gradient with size example:</h4>

<div></div>

</body>
</html>

Example of a radial gradient position values:

<!DOCTYPE html>
<html>
<head><style type="text/css">
h4 {
    font-family:Arial;
}
div 
{
    width: 90%; height: 100px; margin: 5%;
    background: radial-gradient(circle farthest-corner at 100px 50px, #C24704, #FFEB79 35%, #00ADA7);
        background: -webkit-radial-gradient(circle farthest-corner at 100px 50px, #C24704, #FFEB79 35%, #00ADA7); /* Safari */
        background: -o-radial-gradient(circle farthest-corner at 100px 50px, #C24704, #FFEB79 35%, #00ADA7); /* Opera 11.6 to 12.0 */
        background: -moz-radial-gradient(circle farthest-corner at 100px 50px, #C24704, #FFEB79 35%, #00ADA7); /* Firefox 3.6 to 15 
}
</style></head>

<body>

<h4>Radial gradient with size and position example:</h4>

<div></div>

</body>
</html>

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:

Syntax:

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 ››

Radial gradient property (radial-gradient)

Syntax:

Values:

Examples

Example of a radial-gradient shape value:

Example of a radial-gradient size values:

Example of a radial gradient position values:

Repeating radial gradients

Syntax:

Transparency in radial gradients

Comments

About

Contact

Get Connected