This demo shows how to create a background gradient using the CSS3 radial-gradient()
function. The syntax of the function is:
radial-gradient(center, shape size, color-stop, color-stop ...)
where center is the position of the radial gradient's center, shape is the shape
of the gradient (circle or ellipse), size is the size of
the gradient from the center point, and color-stop are the colors and positions of each
color in the gradient. If no position is specified, the colors are even distributed across the
object background.
To use the demo, enter the starting position or the angle of the gradient and specify the
RGB color value and position of each color. Press the Tab key to display the change.
Positions can be expressed in pixels or percentages.
If you omit the center position, the radial gradient will be placed at the horizontal and
vertical center of the object. Up to
five different colors can be specified. You must specify at least two color values.
Note that the radial-gradient() function is supported by: Internet Explorer version 10 and higher, Opera version 11.1 and higher, Chrome version 10 and higher, Safari version 4 and higher, and Firefox version 3.6 and higher.