CSS 3.0 Series: The linear-gradient Object

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)

W3C Spec 
linear-gradient([<bg-position> || <angle>,]? <color-stop>,
 <color-stop>[, <color-stop>]*);

Firefox 3.6
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop>
 [, <stop>]* )

Safari 4 Chrome 
-webkit-gradient(<type>, <point> [, <radius>]?,
 <point> [, <radius>]? [, <stop>]*)

Internet Explorer 5+ (IE9 Preview does not work)
filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)

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);

">&nbsp;</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);

">&nbsp;</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);

">&nbsp;</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);

">&nbsp;</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);

">&nbsp;</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);

">&nbsp;</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).


7 Replies to “CSS 3.0 Series: The linear-gradient Object”

  1. Is it possible to specify transparency for each color? When I’ve used gradients in the past, I’ve found them most effective if I can fade from opaque to transparent. I’m hoping something, like RGBA is available for specifying colors here.

    1. Yes, for WebKit and Mozilla you can use RGBa colors and for the IE filter, it takes an 8 character hex value for colors, the first two characters set the alpha #AARRGGBB.

  2. When I view this page in Internet Explorer Platform Preview 3, the IE gradient filter does not work. It works fine in IE7 and IE8. I wonder if it will be in the final release of IE9 or if they plan to add support for the W3C linear-gradient format. I tried the W3C format just to check and it doesn’t work either.

Leave a Reply to Jon Cancel reply

Your email address will not be published. Required fields are marked *