Take the 2-minute tour ×

Is there a way to do gradients in css/html/javascript only that will work across all the major browsers? (MS IE 5+, Firefox, Opera, Safari)?

Edit: I would like to do this for backgrounds (header, main panel, side panels). Also, would like to have vertical line gradients as well.

Edit: after reading the responses, let's open this up to Javascript solutions as well, since HTML/CSS by itself makes it tougher to achieve.

share|improve this question
add comment

5 Answers

I've done this before as a gimmick, using javascript like:

var parent = document.getElementByID('foo');
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.height = 1/count+"%";
    div.style.top = i/count+"%";
    div.style.zIndex = -1;

If your requirement is just to have a gradient, you really should use a gradient image set as background-image in css. In my case, I was animating the colors and position of the gradient as well. I can't vouch for now cross-browser it is (for starters, make sure the parent has some position applied, otherwise it won't be a position-container for the absolute positioning.

share|improve this answer
add comment

I'm unclear on the implementation details you are seeking (such as background, or just a border along the side of the window, etc); however, it's possible albeit a little tedious.

One example that comes to mind would be to have n-block level elements, such as divs, and then give them each a small height (a couple of pixels, for example) and then gradually change the background color of each subsequent element.

share|improve this answer
The problem with approaches like this is that they fundamentally mix up the structure and the presentation. –  rz. Dec 11 '08 at 20:10
Yeah, I don't disagree with you. I just don't know of any other options that simply use HTML/CSS and work across all A-browsers. –  Tom Dec 11 '08 at 20:12
depending on how the implementation looks like, if it works across all A-browsers, mixing up structure and presentation while not ideal, i would consider versus creating images in photoshop. do u have any examples using html/css i could experiment with? –  joshjdevl Dec 11 '08 at 20:22
Further more using div's etc to create a background probably end up gobbling more bandwidth than an image itself... –  inspite Dec 11 '08 at 20:30
It would not consume much bandwidth if you did it in script, as I would definitely recommend. –  PeterAllenWebb Dec 11 '08 at 20:39
show 2 more comments

I think the short answer is no.

You can create something that looks like a gradient using only css, but to then use it like an image background... I think that is pushing it a bit.

EDIT (feeling silly)

I found the solution: http://en.wikipedia.org/wiki/JPEG

share|improve this answer
add comment

I use the gradient CSS code generator by colorzilla: http://www.colorzilla.com/gradient-editor/

It has polyfills for IE - but not sure how far back it goes.

share|improve this answer
add comment

There are lots of ways to create a gradient now. 1. You can create image for it. 2. Use CSS3 Gradient, it can be linear, radial and repeating.

Syntax for linear :

linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+); 

Syntax for radial :


For IE6 to IE 9 we can use the filter property or you can also use CSS3Pie.

Following are some referances that will help:

Mozilla MDN


share|improve this answer
add comment

Your Answer


