html, body { height: 100%; padding: 0; margin: 0 }

div {
    width:50%;
    height:100%;
    float:left;
    background:slategray;
}

var prefix = (function(){
    var prefixes = ['', 'moz', 'webkit', 'o', 'ms'],
        grad = 'radial-gradient(white,black)',
        style = document.createElement('div').style;
    
    for(var i=0; i<prefixes.length; i++) {
        var prefix = prefixes[i]? '-' + prefixes[i] + '-' : '';

        style.backgroundImage = prefix + grad;
        
        if(style.backgroundImage) {
            return prefix;
        }
    }
    
    return false;
})();

function $(id) { return document.getElementById(id); }


$('svg').onmousemove = $('grad').onmousemove = function(evt) {
    var x = Math.round(100 * evt.clientX/innerWidth),
       y = Math.round(100 * evt.clientY/innerHeight);
        
    this.style.backgroundImage = this.id === 'svg'? 
            'url(\'data:image/svg+xml,<%3Fxml%20version%3D"1.0"%20encoding%3D"UTF-8"%3F>%0A<svg%20version%3D"1.1"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg">%0A%09<defs>%0A%20%20%20%20%20%20%20%20<radialGradient%20id%3D"gradient"%20cx%3D"' + x + '%25"%20cy%3D"' + y + '%25">%0A%20%20%20%20%20%20%20%20%20%20%20%20<stop%20stop-opacity%3D"0"%20%2F>%0A%20%20%20%20%20%20%20%20%20%20%20%20<stop%20offset%3D"100%25"%20%2F>%0A%20%20%20%20%20%20%20%20<%2FradialGradient>%0A%20%20%20%20<%2Fdefs>%0A%20%20%20%20<rect%20width%3D"180%25"%20height%3D"180%25"%20fill%3D"url(%23gradient)"><%2Frect>%0A<%2Fsvg>\')'
        :
            prefix + 'radial-gradient(' + x + '% ' + y + '%, transparent, black 90%)';
};

jsFiddle