CSS3 Linear Gradients - linear-gradient()

What is a CSS Linear Gradient?

A linear gradient is created by specifying a straight gradient line, and then several colors placed along that line. The image is constructed by creating an infinite canvas and painting it with lines perpendicular to the gradient line, with the color of the painted line being the color of the gradient line where the two intersect. This produces a smooth fade from each color to the next, progressing in the specified direction.

Definition from W3C


Examples of Linear Gradients

Linear Gradient - Top to Bottom (default direction)

Linear Gradient - Left to Right

Linear Gradient - Right to Left

Linear Gradient - Diagonal

Create Linear Gradients