CSS Introduction | CSS3 Modules | CSS3 Linear Gradients

CSS3 Linear Gradients

A gradient is an effect that smoothly transitions the color expression between two or more colors. Before CSS3, several separate image files had to be used to create gradient effects. In CSS3, the web browser can render gradient effects directly and simply.

CSS3 provides two kinds of gradients.

1. Linear gradients
2. Radial gradients

CSS3 Gradient Support Versions

The major web browser versions that support CSS3 gradients are as follows. The table also lists the first versions that supported this feature through vendor prefixes.

Linear Gradient

A linear gradient applies a gradient effect in a straight line to the HTML element it is applied to. To create a linear gradient, you need at least two color stops.

The syntax of a linear gradient is as follows.

Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

For each color stop, specify a color that should be smoothly transitioned by the gradient effect. The first color stop becomes the starting point, and the gradient effect is applied in order until the last stop.

<style>
    #grad {
        background: red;
        background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
        background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
        background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple);
    }
</style>

In the example above, the first background property is for all browsers that do not support the linear-gradient property. The last background property is written with the CSS standard syntax. The CSS standard syntax must appear after all vendor-prefixed code so the vendor-prefixed code can work correctly.

Setting the Direction of a Linear Gradient

With CSS, you can set the direction in which the linear gradient effect progresses.

The gradient direction can be set not only to top, right, bottom, and left, but also to diagonal directions. The default direction of a linear gradient effect is from top to bottom.

The following example shows a linear gradient that progresses from top to bottom.

<style>
    #grad {
        background: green;
        background: -webkit-linear-gradient(green, yellow);
        background: -moz-linear-gradient(green, yellow);
        background: -o-linear-gradient(green, yellow);
        background: linear-gradient(green, yellow);
    }
</style>

The following example shows a linear gradient that progresses from right to left.

<style>
    #grad {
        background: green;
        background: -webkit-linear-gradient(right, green, yellow);
        background: -moz-linear-gradient(right, green, yellow);
        background: -o-linear-gradient(right, green, yellow);
        background: linear-gradient(to left, green, yellow);
    }
</style>

The following example shows a linear gradient that progresses from the lower left to the upper right.

<style>
    #grad {
        background: green;
        background: -webkit-linear-gradient(left bottom, green, yellow);
        background: -moz-linear-gradient(left bottom, green, yellow);
        background: -o-linear-gradient(left bottom, green, yellow);
        background: linear-gradient(to top right, green, yellow);
    }
</style>

You can also specify the direction of a linear gradient effect as an angle.

The reference angle, 0 degrees, means progression from bottom to top. A positive angle rotates clockwise from the reference angle, and a negative angle rotates counterclockwise.

The following example shows a linear gradient with a direction of 225 degrees.

<style>
    #grad {
        background: green;
        background: -webkit-linear-gradient(225deg, green, yellow);
        background: -moz-linear-gradient(225deg, green, yellow);
        background: -o-linear-gradient(225deg, green, yellow);
        background: linear-gradient(225deg, green, yellow);
    }
</style>

The linear gradient shown above produces the same gradient effect as a linear gradient with a direction of -135 degrees.

Setting Transparency in a Linear Gradient

CSS3 supports transparency in gradients and can create an effect where a specified color gradually fades away.

To add transparency to a gradient, use RGBA color values. The alpha channel value of an RGBA color ranges from 0.0, which is completely transparent, to 1.0, which is fully opaque.

The following example shows a linear gradient that gradually fades from left to right.

<style>
    #grad {
        background: green;
        background: -webkit-linear-gradient(left, rgba(0,255,0,1), rgba(0,255,0,0));
        background: -moz-linear-gradient(left, rgba(0,255,0,1), rgba(0,255,0,0));
        background: -o-linear-gradient(left, rgba(0,255,0,1), rgba(0,255,0,0));
        background: linear-gradient(to right, rgba(0,255,0,1), rgba(0,255,0,0));
    }
</style>

repeating-linear-gradient() Method

The repeating-linear-gradient() method sets the linear gradient effect to repeat continuously.

The following example shows a repeating linear gradient with a direction of 150 degrees.

<style>
    #grad {
        background: green;
        background: -webkit-repeating-linear-gradient(150deg, red, white 10%, blue 20%);
        background: -moz-repeating-linear-gradient(150deg, red, white 10%, blue 20%);
        background: -o-repeating-linear-gradient(150deg, red, white 10%, blue 20%);
        background: repeating-linear-gradient(150deg, red, white 10%, blue 20%);
    }
</style>