CSS Linear Gradient Tutorial

, ,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

This page shows a example CSS3's linear gradient feature.

0deg, red, yellow

CSS code:

div {background-image: linear-gradient(0deg, red, yellow)}

0deg means the gradient line points upward. Positive values are clock-wise. So, 90deg means pointing to the right.

Browsers Experimental Support

as of , at least Firefox, Google Chrome, Opera, supports it.

for older version of browsers, you might need to use experimental support. Note that these experimental CSS spec's degree orientation is different from W3C's spec. 0 degree here means pointing to the right.

background-image: -webkit-linear-gradient(0deg, yellow, red);
background-image: -moz-linear-gradient(0deg, yellow, red);
background-image: -o-linear-gradient(0deg, yellow, red);
background-image: -ms-linear-gradient(0deg, yellow, red);

Evenly Divided Smooth Gradiants

In this example, the gradient line is at 90 degree. (horizontal, left to right) The box is evenly divided into 5 colors: yellow, red, green, blue, white.

yellow, red, green, blue, white

CSS code:

background-image: linear-gradient(90deg, yellow, red, green, blue, white);

This is equivalent to:

background-image: linear-gradient(90deg, yellow 0%, red 25%, green 50%, blue 75%, white 100%);

Specify Color Stops

Normally, the different colors are evenly divided along 2 end points in a given direction. The starting color is at 0%. The ending color is at 100%.

You can specify the position on the gradient line for each color. In this example, we use the same 5 colors, but with red starting at 80%.

yellow, red 80%, green, blue, white

CSS code:

background-image: linear-gradient(90deg, yellow, red 80%, green, blue, white);

Color Stops Example 2

Here we specify 2 color stops. Red at 80% and green at 95%.

yellow, red 80%, green 95%, blue, white

CSS code:

background-image: linear-gradient(90deg, yellow, red 80%, green 95%, blue, white);

Sharp Color Change

When 2 color stops are at the same position, you have a sharp color change. Here, both red and green are at 80%.

yellow, red 80%, green 80%, blue, white

CSS code:

background-image: linear-gradient(90deg, yellow, red 80%, green 80%, blue, white);

First Color's Color Stop

If the first color has a color stop other than 0%, than all colors before it is the same. (similar for last color)

yellow 50%, red, green, blue, white

CSS code:

background-image: linear-gradient(90deg, yellow 50%, red, green, blue, white);

Color Stops by Pixels

The percentage for color stops can be any CSS length unit, such as px (pixels).

Each color stop should be equal or greater than its previous color stop value, else it doesn't make sense.

Here's color stops by pixels.

yellow, red 100px, green 200px , blue 300px, white

CSS code:

background-image: linear-gradient(90deg, yellow, red 100px, green 200px , blue 300px, white);

RGB, HSL, Color Specs

Note that color spec can be any CSS color spec, even with opacity.

Reference

blog comments powered by Disqus