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

Linear Gradient Image

You can repeat a linear gradient as a background image by setting the width and/or height of the image to less than 100% of the object's width and/or height. The gradient will then be tiled across the object background just as an image file is.

Explore how to create a background consisting of tiled linear gradients by choosing parameters from the web form below, setting the image size to be less than 100% in the horizontal and/or vertical directions. Code for your choices will be automatically generated and displayed below the preview box.

Linear Gradients as Images

0%100%
0%100%


0deg 360deg
0 1
0% 100%
0 1
0% 100%
0 1
0% 100%
background-size: 25% 25% background-repeat: repeat; background-image: linear-gradient(white, black);