This page shows a example CSS3's linear gradient feature.
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.
as of , at least Firefox, Google Chrome, Opera, supports it. Test it here: CSS linear gradient test.
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);
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.
CSS code:
background-image: linear-gradient(90deg, yellow, red, green, blue, white);
This is equivalent to linear-gradient(90deg, yellow 0%, red 25%, green 50%, blue 75%, white 100%);.
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%.
CSS code:
background-image: linear-gradient(90deg, yellow, red 80%, green, blue, white);
Here we specify 2 color stops. Red at 80% and green at 95%.
CSS code:
background-image: linear-gradient(90deg, yellow, red 80%, green 95%, blue, white);
When 2 color stops are at the same position, you have a sharp color change. Here, both red and green are at 80%.
CSS code:
background-image: linear-gradient(90deg, yellow, red 80%, green 80%, blue, white);
If the first color has a color stop other than 0%, than all colors before it is the same. (similar for last color)
CSS code:
background-image: linear-gradient(90deg, yellow 50%, red, green, blue, white);
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.
CSS code:
background-image: linear-gradient(90deg, yellow, red 100px, green 200px , blue 300px, white);
Note that color spec can be any CSS color spec, even with opacity.