Course Technology Cengage Learning New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 4

Repeating Radial Gradients

To add a repeating radial gradient to a block-level element, apply the following repeating-radial-gradient function to the element background:

repeating-radial-gradient(params)

where params set the parameters of the radial gradient.

Use the web form below to generate the code for the repeating-linear-gradient function. Use the [+] button to add more color stops. Use the [-] button to remove color stops. The location of the last color stop must be less than 100% for the gradient to repeat.

Repeating Radial Gradients



0px 300px
0px 300px

0% 100%
0% 100%
0 1
0% 100%
0 1
0% 100%
0 1
0% 100%
background: repeating-radial-gradient(white, black);