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

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(direction, color-stop1, color-stop2 ...)

where direction is the direction of the gradient expressed either as an angle or the keywords:

to [left | right] || [top | bottom]

To use the demo, enter the direction and specify the RGB color value and color stops for each color. Color stops can be expressed in pixels or percentages. If you omit the direction the gradient will start from the top and move down. If you omit the color stops, the colors will be evenly space across the background. Up to five different colors can be specified. You must specify at least two color values. Click the checkboxes next to colors you want included in the gradient.

To
or specify the starting angle
Angle (deg)

Color 1
Color-Stop

Color 2
Color-Stop

Color 3
Color-Stop

Color 4
Color-Stop

Color 5
Color-Stop

Preview

Style

none