gradients using only html and css and javascript?

Question

Hi,

Is there a way to do gradients in css/html/javscript only that will work across all the major browsers? (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.

Answer 1

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.

Answer 2

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

Answer 3

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

var parent = document.getElementByID('foo');
for(var i=0; i< count; i++) {
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.width='100%';
    div.style.height = 1/count+"%";
    div.style.top = i/count+"%";
    div.style.zIndex = -1;
    parent.appendChild(div);
}

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.