Afficher une barre avec un dégradé de couleurs

Degrade(255,0,0,0,0,255,50,'50%');

Degrade(255,0,0,0,255,0,50,'200');

Degrade(255,230,80,255,255,255,50,'500');

Degrade(100,100,50,200,255,0,50,'100%');

<html>
<head>
<title>Texte multi-couleur</title>
<script LANGUAGE="JavaScript">
<!--
//construction du tableau des valeurs hexadécimales
var hexa = new Array(16);
for(var i = 0; i < 10; i++) hexa[i]=i;
hexa[10] = "A";
hexa[11] = "B";
hexa[12] = "C";
hexa[13] = "D";
hexa[14] = "E";
hexa[15] = "F";

function toHexa(n) {
//fonction de conversion de décimal à hexadécimal
if (n < 0) return "00";
if (n > 255) return "FF";
return "" + hexa[Math.floor(n/16)] + hexa[Math.floor(n%16)];
}

function Degrade(dr,dg,db,fr,fg,fb,nb, taille) {
//paramètres :
// dR est la couleur rouge de début
// dG est la couleur verte de début
// dB est la couleur bleue de début
// fR est la couleur rouge de fin
// fG est la couleur verte de fin
// fB est la couleur bleue de fin
// nb est la précision du dégradé.
//    Au plus le nombre est élevé, au plus le dégradé sera précis.
// taille : taille de la barre : en pourcentage (par rapport à la fenêtre) ou un nombre
cr = dr;
cg = dg;
cb = db;
sr = (fr - dr) / nb;
sg = (fg - dg) / nb;
sb = (fb - db) / nb;
document.write('<table BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="' + taille + '" COLS="1">');
document.write('<tr>');
for (var x = 0; x <= nb; x++) {
    document.write('<TD WIDTH="1" BGCOLOR="#' + toHexa(cr) + toHexa(cg) + toHexa(cb) + '"> </TD>');
    cr += sr; cg += sg; cb += sb;
}
document.write('</tr>');
document.write('</table>');
}

Degrade(100,100,50,200,255,0,50);
//-->
</script>
</head>

<body>

</body>
</html>

Je vous conseille de ne pas mettre de barres trop longues car cela ralentit la vitesse d'affichage de la page.