Gradient background, the CSS 3 standard way

In this article I am going to explain the CSS 3 standard way of achieving a linear-gradient background. Using only this technique is probably not going to give the cross browser behavior that you are expecting.

Linear gradient

The definition of a linear gradient from W3C documentation:

A linear gradient is created by specifying a 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.

So, to set a linear gradient for a div or another DOM element we would need to imagine a straight line that goes through the object at an specific angle touching the center of the element. Then define the colors we which at specific points in the line.

linear-gradient()

The linear-gradient function has this prototype:

1
2
3
4
linear-gradient(
    [[<angle> | to <side-or-corner>],]?
    <color-stop>[, <color-stop>]+
)

The first argument ([[ | to ],]) specifies the direction of the gradient line. If omitted it defaults to **bottom**.

As you can see from the prototype, the direction can be specified in two ways:

<angle> - For the purpose of this argument, 0deg points upward, and positive angles represent clockwise rotation, so 90deg point toward the right.

to <side-or-corner> - If the argument is to top, to right, to bottom, or to left, the angle of the gradient line is 0deg, 90deg, 180deg, or 270deg, respectively.

<color-stop> - Expects a color and a position. Something similar to #fff 0%. If the position is omitted the browser will make a best guess.

Examples

Here are some examples of how the linear-gradient looks in some rectangular divs. If you don’t see the gradients it is possible that your browser doesn’t currently support the W3C standard.

1
2
3
.some-class {
    background: linear-gradient(#000, #fff);
}

1
2
3
.some-class {
    background: linear-gradient(to left, #0f0, #00f);
}

1
2
3
.some-class {
    background: linear-gradient(37deg, #000 0%, #f00 10%, #0f0 40%, #00f 60%, #000 100%);
}