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

Repeating Linear Gradients

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

repeating-linear-gradient(params)

where params set the parameters of the linear 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 position of the last color stop must be less than 100% for the gradient to repeat.

Repeating Linear Gradients


0deg 360deg
0 1
0% 100%
0 1
0% 100%
0 1
0% 100%
background: repeating-linear-gradient(white, black);