Today, I want to talk about making CSS3 Gradients work on every browser. These are very new (and are part of a working draft), and only supported in Chrome, Safari and Firefox 3.6+. They are supported in Internet Explorer 5.5+ as well, with their little proprietary filter, but they can only be used on elements with display:block, as far as I know (I couldn’t get them to work on an inline element).

Even if we decided to stick with only using these gradients in block elements, there is another problem. There are other browsers, such as Opera, that don’t support these gradients, and older versions of browsers don’t support them either. We could use an image, but I don’t want to be creating new images every time I want to use a gradient. It’d be far too cumbersome. So I decided to get the computer to do it for me.

I wrote a PHP script that generates gradients on the fly. So far, it works with vertical or horizontal linear gradients. It’s missing support for color-stops and caching of the generated gradients both on the browser and the server, but I’ll be adding those features soon, if there’s a demand for it. Also, if anyone has any suggestions/ideas, I’d love to hear about them in the comments section.

The code is very simple:

.gradient {
background: url('gradient.php?vertical=true&from=FF0000&to=00FF00&height=600') repeat-x;
background: -moz-linear-gradient(top, #FF0000, #00FF00);
background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00));
width: 800px;
height: 600px;
}

Please note, I’m only using 600px as the height of the element for demonstration purposes. And there you go. Firstly, we link to the gradient.php script, and afterwards, we use browser-specific gradient syntax. On browsers that don’t support CSS3 gradients, the gradient.php script is called. On browsers that do, it’s ignored, which means it doesn’t needlessly call the script or anything of the sort.

There’s one thing to bear in mind: in vertical gradients gradient.php requires a height to be provided and in horizontal gradients it requires a width. It’s a minor inconvenience. I could use JavaScript to figure out the height/width of the element, but it’s not worth the performance hit that that would bring.

If you don’t have PHP on your server, or you just want to experiment, I’ve put the gradient.php script up on Terra Duo for everyone to make use of freely.

To use it, simply point the URL in your CSS to http://labs.terraduo.com/gradient.php. If you use it, you’ll instantly get access to any updates I make to the script. I don’t plan on taking it down, but if anything happens and I’m forced to, I’ll post here and let you all know in advance.

View the demo

Download gradient.php

That’s it for now. Let me know what you think, I’d love to hear your opinion.