Repeating Gradients

If we want to create a gradient "pattern" that repeats over the background of an element. But linear-repeating gradients can be created by repeating the background image (with background-repeat), but there's no equivalent way to easily create repeating radial gradients.

CSS3 comes with both a repeating-linear-gradient and a repeating-radial-gradient syntax which makes easier. Gradients with repeating-linear-gradient and repeating-radial-gradient have the same syntax as the nonrepeating versions.

snippet

.repeat_linear_1 {
     background-image: -webkit-repeating-linear-gradient(left, rgba(0,0,0,0.5) 10%, 
                            rgba(0,0,0,0.1) 30%);
}
 .repeat_radial_2 {
     background-image: -webkit-repeating-radial-gradient(top left, circle, rgba(0,0,0,0.9), 
                            rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%);
}
 .multiple_gradients_3 {
     background-image: -webkit-repeating-linear-gradient(left, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.1) 30%), 
                        -webkit-repeating-radial-gradient(top left, circle, rgba(0,0,0,0.9), 
                            rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%);
}