CSS3 repeating-linear-gradient

Here is a breif explanation of how to repeat gradients in CSS3.

Explanation

Property :

background: repeating-linear-gradient(direction|angle,color-stop1,color-stop2,..);

Usage:


repeating-linear-gradient(red, yellow 10%, green 20%);

Definition:

The CSS3 gradients let you to display smooth transitions between two or more specified colors.
The repeating-linear-gradient() function is used to repeat linear gradients.
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);

Example 1:


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

Result:


Property :

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

Usage:


repeating-radial-gradient(red, yellow 10%, green 20%);

Definition:

The repeating-radial-gradient() function is used to repeat radial gradients.
background: -moz-radial-gradient(red, green, blue);

Example 2:


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

Result:



Ask Questions

Ask Question