HTML
<div id="content">
<p>
<input class="color" onchange="addNewBoxShadowStylesToHead('#frontcontent', '#'+this.color);" />
<h1> This is a example.</h1>
</p>
</div>
<div id="frontcontent">This div will have the effect</div>
JS
var head = document.head || document.getElementsByTagName('head')[0];
function addNewBoxShadowStylesToHead(selector,color) {
var css = selector + '{-webkit-box-shadow: inset 0 200px 400px -200px ' +color+ ';' +
'-moz-box-shadow: inset 0 200px 400px -200px ' + color + ';'+
'box-shadow: inset 0 200px 400px -200px ' + color + '; }',
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
OR Simpler JS
function applyboxshadow(selector, color) {
$(selector).css({
'-webkit-box-shadow' : 'inset 0 200px 400px -200px ' + color,
'-moz-box-shadow': 'inset 0 200px 400px -200px '+ color,
'box-shadow': 'inset 0 200px 400px -200px '+ color
});
}
call it like so
<input class="color" onchange="applyboxshadow('#frontcontent', '#'+this.color);" />