Course Technology Cengage Learning New Perspectives on HTML and CSS
Tutorial 8

Linear Gradients

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.

Starting Position
or specify the starting angle
Angle (deg)

Color 1: (rgb) ( , , )         
Color-Stop

Color 2: (rgb) ( , , )         
Color-Stop

Color 3: (rgb) ( , , )         
Color-Stop

Color 4: (rgb) ( , , )         
Color-Stop

Color 5: (rgb) ( , , )         
Color-Stop

Preview

Style

none