Gradient from canvas

var renderToCanvas = function(w, h, render) {
    var buffer = document.createElement('canvas');
    buffer.width = w;
    buffer.height = h;
    render(buffer.getContext('2d'));
    return buffer;
};

function gradientDataURL(height) {
    var canvas = renderToCanvas(1, height, function(ctx) {
        var g = ctx.createLinearGradient(0, 0, 0, height);
        g.addColorStop(0, '#ffffff');
        g.addColorStop(1, '#000000');
        ctx.fillStyle = g;
        ctx.fillRect(0, 0, 1, height);
    });
    return canvas.toDataURL();
}

function hasGradients() {
    return !!jQuery.browser.msie || !!(function() {
        var div = document.createElement('div');
        div.style.cssText = [
            "background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(red), to(blue))",
            "background-image:-moz-linear-gradient(top left, bottom right, from(red), to(blue))",
            "background-image:-moz-linear-gradient(left, red, blue)"
        ].join(';');
        return div.style.backgroundImage;
    })();
}

if (!('gradient' in $.support)) $.extend($.support, {'gradient': hasGradients()});

$(function() {
    if (!jQuery.support.gradient) {
        var target = $('#target');
        var data = gradientDataURL(target.height());
        target.css({backgroundImage: "url('"+ data + "')", backgroundRepeat: 'repeat-x'});
    }
});