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

Radial Gradient Image

You can repeat a radial 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 radial 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.

Radial Gradients as Images

0%100%
0%100%



0px 300px
0px 300px

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