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%);
}
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #