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

Linear Gradients

To add a color gradient to a block-level element, apply the following linear-gradient function to the element background:

linear-gradient(direction, color-stop1, color-stop2, ...)

where direction sets the direction of the gradient expressed either as angle or the corner/side to which the gradient is pointing, color-stop1, color-stop2, ... are the colors in the gradient along with the locations (stops) where those colors are placed.

Use the web form below to generate the code for the linear-gradient function. Use the [+] button to add more color stops. Use the [-] button to remove color stops.

Linear Gradient Styles


0deg 360deg
0 1
0% 100%
0 1
0% 100%
0 1
0% 100%
justify content: stretch;
align-items: stretch;