This demo shows how to create a background gradient using the CSS3 linear-gradient()
function. The syntax of the function is:
linear-gradient(position || angle, color-stop, color-stop ...)
where position is the starting position of the gradient, angle is the angle of the
gradient across the object background, 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. Positions can be expressed in pixels or percentages.
If you omit the starting position, the gradient will start from the top and move down. Up to
five different colors can be specified. You must specify at least two color values.
Note that the linear-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.