Gradient fill using jQuery?

Question

I've got a <div> that needs a gradient background. However, the size of the div is variable, which lands me back in "can't do gradients in CSS" land.

However, I'm pretty sure this is possible in jQuery, I just can't seem to find a decent example. Does anyone have something they can point my way?

Thanks.

Answer 1

While this will most likely give you precisely what you want, there seem to be quite a few potential collisions. Give it a shot, though; if it fails, I recommend generating the gradient server-side.

Answer 2

Is it absolutely necessary to generate the gradient rather than simply create one in your favorite graphics program? Might be more efficient to save resources by simply tiling a graphic.

Answer 3

Not Jquery but a suggestion: you could generate your gradient with SVG: http://www.w3schools.com/svg/svg_grad_linear.asp

Answer 4

The Background Canvas plugin lets you do that sort of thing and more.

Answer 5

Hi, in case that someone needs this, and if you think that the jQuery plugin is too heavy, you can use this

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A622', endColorstr='#00B726'); /* for IE */

background: -webkit-gradient(linear, left top, left bottom, from(#00A622), to(#00B726)); /* for webkit browsers */

background: -moz-linear-gradient(top,  #00A622, #00B726); /* for firefox 3.6+ */