CSS3 radial-gradient

Here is a brief definition and the explanation on the usage of the CSS3 Radial Gradient property.

Explanation

Property :

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

Usage:


background: radial-gradient(red, green, blue);
background: radial-gradient(red 5%, green 15%, blue 60%);
background: radial-gradient(circle, red, yellow, green);
background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);

Definition:

A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops.
By default, shape is ellipse, size is farthest-corner, and position is center.

There are two types of radial gradients:
Radial gradient with evenly spaced color stops.
Radial Gradient with differently spaced color stops.

"Shape" parameter for the CSS3 radial gradient:
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
Example:
background: -moz-radial-gradient(circle, red, yellow, green);

"Size" parameter for the CSS3 radial gradient:
The size parameter defines the size of the gradient. It can take four values:
closest-side
farthest-side
closest-corner
farthest-corner

Example:
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

Repeating a radial-gradient
The repeating-radial-gradient() function is used to repeat radial gradients:


Example 1:


<div style=' background: radial-gradient(indigo, green, yellow);
background: -webkit-radial-gradient(indigo, green, yellow); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(indigo, green, yellow); /* For Opera 11.6 to 12.0 */
padding:30px;width:200px;height:70px;'>
</div>

Result:


Example 2:


<div style=' background: radial-gradient(circle, red, yellow, indigo);
background: -webkit-radial-gradient(circle, red, yellow, indigo);/* Safari 5.1 to 6.0 */
background: -o-radial-gradient(circle, red, yellow, indigo); /* For Opera 11.6 to 12.0 */
padding:30px;width:200px;height:70px;'>
</div>

Result:


Example 3:


<div style='background: radial-gradient(closest-side at 70% 55%,indigo,red,yellow,green);
background: -webkit-radial-gradient(closest-side at 70% 55%,indigo,red,yellow,green);/* Safari 5.1 to 6.0 */
background: -o-radial-gradient(closest-side at 70% 55%,indigo,red,yellow,green);/* For Opera 11.6 to 12.0 */
padding:30px;width:200px;height:70px;'>
</div>

Result:


Example 4:


<div style='background: radial-gradient(farthest-side at 50% 50%,indigo,red,yellow,green);
background: -webkit-radial-gradient(closest-side at 70% 55%,indigo,red,yellow,green);/* Safari 5.1 to 6.0 */
background: -o-radial-gradient(closest-side at 70% 55%,indigo,red,yellow,green);/* For Opera 11.6 to 12.0 */
padding:30px;width:200px;height:70px;'>
</div>

Result:



Ask Questions

Ask Question