This demo shows how to create a background gradient using the CSS3 radial-gradient()
function. The syntax of the function is:
radial-gradient(shape size at position, color-stop1, color-stop2 ...)
where shape is the shape of the gradient (circle or ellipse),
size is the size of the gradient as measured from the the center point, position determines
the center point, and color-stop are the colors and positions of each
color in the gradient. If no color stops are specified, the colors are even distributed across the
object background.
To use the demo, select the shape and size from the list boxes or specify the size from the
input boxes. Note that you can only select one shape/size option. Select the center position using
the drop-down list boxes or the input boxes. Once again you can only select one method of
positioning. Finally select the colors and stop position of each color. Any omitted
parameter values will assume their default values. Up to
five different colors can be specified. You must specify at least two color values. Click the
checkmark box next to the colors to be placed in the gradient.