Most everyone agrees that a gradient background softens web pages and areas of web pages in a pleasing way. Many webmasters use a gradient somewhere on their website. This makes a CSS solution a good candidate to be adopted into web standards and used by all major browsers.

The old/current way to add a gradient background was to use an image of a gradient and apply it as a stretchable, repeatable background to the element. There are many tools to help you make an image. Even online tools like http://tools.dynamicdrive.com/gradient/ .

It seems unusual that the gradient object in CSS 3.0 is so incomplete still. Maybe incongruous is a better word than incomplete. The W3C spec is complete but the browser implementations are still all over the place.

From W3C

A gradient is a browser-generated image specified entirely in CSS, which consists of smooth fades between several colors. There are two basic kinds of gradients currently defined, linear and radial. These are specified by the linear-gradient() and radial-gradient() functions, and can be used any place an image can currently be used.

http://dev.w3.org/csswg/css3-images/#gradients-

IMPORTANT : Gradients can be used in any property that accepts images.

There are three different types of CSS gradient objects. In this post we will look at linear gradients. future posts will be about radial and repeating gradients. I’ll put links to them here when they are done.

UPDATE: The radial gradient post is here.



Linear Gradients

Browser Support (with varied syntax)

FROM LEFT TO RIGHT

Two color stops

Here’s the code…

<p>Two color stops</p> <div style="width: 500px; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, yellow), color-stop(1, green)); background-image: -moz-linear-gradient(left, yellow, green); filter:progid:DXImageTransform.Microsoft.Gradient (GradientType =1, startColorstr=#55FBFE04, endColorstr=#5500FF00); "> </div>

Note that the Internet Explorer implementation uses GradientType to set the direction of the gradient (it is either 1 for horizontal or 0 for vertical). It can not be set for any angle like some of the other implementations. Also, Internet Explorer uses 8 digit hex codes for the colors. This is because the first two characters indicate the alpha http://en.wikipedia.org/wiki/Alpha_compositing (opacity) of the color.

Multiple color stops

Here’s the code…

<p>Multiple color stops</p> <div style="width: 500px; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, red), color-stop(0.28, orange), color-stop(.42, yellow), color-stop(.56, green), color-stop(.7, blue), color-stop(.84, indigo), color-stop(1, violet)); background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); "> </div>

Internet Explorer’s Gradient Filter style not included. It only allows two color stops.

FROM TOP TO BOTTOM

Two color stops

Here’s the code…

<p>Two color stops</p> <div style="width: 300px; height: 300px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, yellow), color-stop(1, green)); background-image: -moz-linear-gradient(top, yellow, green); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#55FBFE04, endColorstr=#5500FF00); "> </div>

Multiple color stops

Here’s the code…

<p>Multiple color stops</p> <div style="width: 300px; height: 300px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, red), color-stop(0.28, orange), color-stop(.42, yellow), color-stop(.56, green), color-stop(.7, blue), color-stop(.84, indigo), color-stop(1, violet)); background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); "> </div>

Internet Explorer’s Gradient Filter style not included. It only allows two color stops.

AT A -45 DEGREE ANGLE (Top Left to Bottom Right in a square)

Two color stops

Here’s the code…

<p>Two color stops</p> <div style="width: 300px; height: 300px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, yellow), color-stop(1, green)); background-image: -moz-linear-gradient(-45deg, yellow, green); "> </div>

Internet Explorer’s Gradient Filter style not included. It only allows vertical (GradientType =0) or horizontal(GradientType =1) gradients

Note that the Mozilla implementation allows you to set an angle (-45 degrees in this example) while the WebKit implementation requires a start point and end point to determine the direction of the gradient. Fortunately, you can use the constants such as “left top”. The W3C spec supports using an angle so that will probably be what everyone evolves into.

Multiple color stops

Here’s the code…

<p>Multiple color stops</p> <div style="width: 300px; height: 300px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, red), color-stop(0.28, orange), color-stop(.42, yellow), color-stop(.56, green), color-stop(.7, blue), color-stop(.84, indigo), color-stop(1, violet)); background-image: -moz-linear-gradient(-45deg, red, orange, yellow, green, blue, indigo, violet); "> </div>

Internet Explorer’s Gradient Filter style not included. It only allows vertical (GradientType =0) or horizontal(GradientType =1) gradients

The problems with a consistent implementation seem more a problem of style rather than technical limitations. I hope that means adoption will be quick once the various implementations become more in line with each other. For now, I’ll be using images for gradients (except of course in this blog).