CSS3 Color Linear Gradient

Perm URL with updates: http://xahlee.org/js/css_gradient.html

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

Here's the CSS syntax examples:

  • background-image: linear-gradient(0deg, red, yellow)
0deg, red, yellow

CSS code:

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

as of , no browser supports it. Test it here: CSS linear gradient test.

Browsers Experimental Support

Google Chrome, Firefox, Safari, Opera, all have experimental support, except Internet Explorer 9. (IE10 does support it)

270deg, yellow, red

Here's the CSS code:

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

The first parameter is a degree. Here, 270° means going from top to bottom, vertically.

Smooth Gradiants

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

0deg, yellow, red, green, blue, white

CSS code:

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

This is equivalent to linear-gradient(0deg, 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%.

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

CSS code:

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

Color Stops Example 2

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

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

CSS code:

background-image: linear-gradient(0deg, 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%.

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

CSS code:

background-image: linear-gradient(0deg, 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)

0deg, yellow 50%, red, green, blue, white

CSS code:

background-image: linear-gradient(0deg, 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. The whole bar has 1k pixels.

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

CSS code:

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

RGB, HSL, Color Specs

Note that color spec can be rgb or hsl, even with opacity.

Reference

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs