Degradados(gradientes) para IE y navegadores viejos Lo que necesitamos hacer es crear una pequeña librería para hacer que nuestros navegadores tanto modernos como "antiguos" soporten los degradados.
Esta pequeña librería la descargue hace tiempo que ya no encuentro de donde así que la pondré tal cual.
js/gradientes.js
Código:
Ahora tenemos dos opciones utilizar modernizr.js o simplemente hacer referencia directamente en nuestro documento HTML.function $(x){return document.getElementById(x);}
function css(id,prop){
if(window.getComputedStyle){
return document.defaultView.getComputedStyle($(id),null).getPropertyValue(prop);
}else{
var re = /(-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return $(id).currentStyle[prop] ? $(id).currentStyle[prop] : null;
}
}
function gradiente(id,col1,col2,type){
if (document.createElement("canvas").getContext) {
var b1=parseInt(col1.substr(5,2),16);
var g1=parseInt(col1.substr(3,2),16);
var r1=parseInt(col1.substr(1,2),16);
var b2=parseInt(col2.substr(5,2),16);
var g2=parseInt(col2.substr(3,2),16);
var r2=parseInt(col2.substr(1,2),16);
var ref = document.createElement("canvas");
ref.width = parseInt(css(id,'width'));
ref.height =parseInt(css(id,'height'))
var context = ref.getContext("2d");
context.translate(0,0);
context.scale(1,1);
if(type){
context.translate(ref.width,0);
context.rotate(Math.PI/2);
var gradient = context.createLinearGradient(0, 0, 0, ref.width);
gradient.addColorStop(1, "rgba("+r1+","+g1+","+ b1+", 1.0)");
gradient.addColorStop(0, "rgba("+r2+","+g2+","+ b2+", 1.0)");
context.fillStyle = gradient;
context.fillRect(0,0,ref.height, ref.width);
}else{
var gradient = context.createLinearGradient(0, 0, 0, ref.height);
gradient.addColorStop(0, "rgba("+r1+","+g1+","+ b1+", 1.0)");
gradient.addColorStop(1, "rgba("+r2+","+g2+","+ b2+", 1.0)");
context.fillStyle = gradient;
context.fillRect(0,0,ref.width, ref.height);
}
$(id).appendChild(ref);
} else {
$(id).style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+col1+", endColorstr="+col2+", GradientType="+type+")"
}
}
Para ambos creamos nuestras hojas de estilos y mandamos llamar la función gradient.
Código:
<script>
window.onload=function(){
gradient('degradado','#2b1300','#a37b50',0);
}
</script>
css/style.css
Código:
Ahora simple mente mandamos llamar a nuestro id en una etiqueta div#degradado{
width:100px;
height:20px; border:1px solid #CCC;
}
Código:
<div id="degradado">Gradientes para todos</div>
y nos quedaría un archivo así:
gradientes.html
Código:
ahora si quedemos utilizar modernizr.js como en el ejemplo pasado nos quedaría un archivo así:<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Degradados para todos</title>
<link rel="stylesheet" href="css/style.css" media="screen" ></link>
<script src="js/degradados.js"></script>
<script>
window.onload=function(){
gradient('degradados','#a37b50','#2b1300',0);
}
</script>
</head>
<body>
<div id="degradados"></div>
</body>
</html>
gradientesmz.html
Código:
Espero sea de utilidad y sirva de algo, excelente día para todos<!DOCTYPE html>
<html lang="es">
<head>
<script src="js/modernizr.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.cssgradients ,
nope: ['js/gradientes.js'],
both: ['css/style.css' ]
});
</script>
</head>
<body>
<div id="degradado">Gradientes para todos</div>
</body>
</html>
Al final sí terminé criticando a las librerías correctoras. 
)
, sólo aclarando el “post anterior” lo puse en el foro CSS por que utiliza en su mayor parte CSS3 que JavaScript y este a la inversa. 
