CSS 3: Gradient Generation In Browser

Yes believe it or not you can now create browsers in browser without a graphics program using CSS3. It can be a little tricky to understand how they work at first, but I’m going to try and make it as easy as possible to understand. We are going to go through how to generate gradients in all the supported browsers. First Mozilla, then Webkit, and finally Internet Explorer. Unfortunately Opera doesn’t yet support them.

Note: As in the other CSS tutorials, I am using live CSS to create the examples so you will need a compatible browser to view them. Each section requires a different browser to see them. Mozilla refers to Firefox based browsers, Webkit refers to Google Chrome & Safari 4+, and IE is Internet Explorer.

CSS Gradient Generation: Mozilla

First let’s look at how Mozilla generates gradients within the browser.

Here is what that would look like. You must be using Firefox 3.6 (or higher) to see this example.

Let’s take a look at how that’s working. To generate a gradient we use the standard background-image property, however instead of just giving it a color, path to an image etcetera we pass the -moz-linear-gradient property to it.

The -moz-linear-gradient property can look a little daunting at first, but let’s see what we can do about simplifying that. First up is the position for the gradient, it takes the normal values such as ‘top’, ‘center’, ‘bottom’ for vertical and ‘left’, ‘center’, ‘right’ for horizontal positioning. You can also use a pixel value or even define rotation in degrees. Here is an example of degrees being used:

Here’s what that would look like. Again you must be using Firefox 3.6 (or higher) to see this example.

Now onto the important part, the ‘stops’. These are a color in a W3C color name, Hex, RGB, RGBA, HSL, or HSLA format along with an optional stop value in percent or a CSS standard length value (px, em etc). They are also infinite, so you can define as many stops as you like within a gradient. If you define a color, but no stop (as in the previous example) then the gradient will be evenly distributed throughout the element it is defined on.

There is also another property called -moz-repeating-linear-gradient. That produces a gradient that repeats until it fills the element, instead of producing a single gradient that fills the entire element. Here is an example:

Here is an example. Again you must be using Firefox 3.6 (or higher) to see this example.

CSS Gradient Generation: Webkit

The Webkit version of gradient generation can be complicated at first too, but let’s take a first look at it.

I’ve kept the gradient exactly the same as the Mozilla example, that way it’s easy to compare how the two properties are different. Here is what it would look like. You will need a Webkit browser (Google Chrome, Safari 4+) to see this example.

Let’s take a look at how the Webkit version differs from the Mozilla version. It’s the same kind of dual property setup, this time using background-image and -webkit-gradient. The values for -webkit-gradient are quite different to Mozilla’s.

The first value of -webkit-gradient is the gradient type. You can choose either linear (rectangular) or radial (circular). Next are the positions. You can use ‘left top’, ‘right top’, ‘left bottom’, ‘right bottom’ or x/y coordinates. Finally we have the color stops. They have exactly the same function as the Mozilla stops, they just look different. Each stop must be in a color-stop() and each one must be separated by commas (,). The color stop itself must contain a percentage of the gradient specified as a decimal (30% is 0.3, 75% is 0.75 etc) and a color in a W3C color name, Hex, RGB, RGBA, HSL or HSLA color value.

To replicate the rotated example created by the Mozilla browsers, you can just change the position like this example:

Here’s what it looks like. Again you must be using a Webkit browser (Google Chrome, Safari 4+) to see this example.

As of yet I have been unable to find a way to set a custom rotation as you can with the Mozilla gradients.

CSS Gradient Generation: Internet Explorer

Yes, it’s hard to believe but version 6, 7, 8 support gradient generation via CSS. More like a hack really, but it works & that’s what counts. I haven’t tested Internet Explorer 9 yet so it may work. If anyone can let me know it would be very helpful.

Let’s look at how Internet Explorer creates gradients.

Here is what it looks like. You will need IE 6, 7, or 8 to view this example.

Unfortunately that’s about all Internet Explorer can do as far as I’m aware. It can’t do much of what the other browsers can. You can, I believe, add GradientType=1 to rotate the gradient so it is horizontal instead of vertical. You can also use startColor or endColor instead of start/endColorStr and define a AARRGGBB Hex value to have a gradient with opacity.

CSS Gradient Generation: Graceful Degradation

Graceful degradation for CSS gradients is non-existent. You could set a background color using background or background-color before setting the gradient and if a browser doesn’t support the gradient it seems to ignore it and show the color instead. Other than that there isn’t very much I can think of to help with degradation.

I hope you have enjoyed this look at the gradient generating powers of CSS. If you have any questions or something to add please don’t hesitate to do so via the comments. You can follow me on Twitter or you can ‘like’ Return True’s Facebook page.

BrowserCSSGradient