il fade solitamente è una dissolvenza mentre in questo caso si tratta di cambiare il colore, o gradiente, del testo.

In generale preferisco poter riutilizzare il codice e riadattarlo in modo semplice, ecco una mia proposta bytefx style che oltre al colore del testo permette di cambiare altri tipi di colore ed ha funzioni in qualche modo riutilizzabili:
codice:
function gradient(id, start, end, speed, prop, callback){
	var	style = document.getElementById(id).style,
		i = setInterval(function(){
			for(var	j = 0; j < 3; j++)
				start[j] = gradient.run(start[j], end[j], speed);
			style[prop] = gradient.color(start);
			if(String(start) === String(end)) {
				clearInterval(i);
				if(callback)
					callback(id);
			}
		}, 20);
	start	= gradient.rgb(start.substring(1));
	end	= gradient.rgb(end.substring(1));
	speed	= speed || 10;
	prop	= prop || "color";
	return	i;
};
gradient.color	= function(c){return "#".concat(gradient.hex(c[0]), gradient.hex(c[1]), gradient.hex(c[2]))};
gradient.hex	= function(rgb, c){return (c = rgb.toString(16)).length === 1 ? "0".concat(c) : c};
gradient.rgb	= function(c){return [parseInt(c.substr(0,2), 16), parseInt(c.substr(2,2), 16), parseInt(c.substr(4,2), 16)]};
gradient.run	= function(x, y, speed) {return x < y ? Math.min(x + speed, y) : Math.max(x - speed, y)};
Questo è un esempio di come la funzione può essere usata:
codice:
onload = function(){
	var	div = document.createElement("div");
	div.id = "test";
	div.appendChild(document.createTextNode("Hello Gradient !"));
	document.body.appendChild(div);
	gradient("test", "#000000", "#FFFFFF", 10, "color", function(id){
		gradient(id, "#FFFFFF", "#000000", 20, "backgroundColor", function(id){
			gradient(id, "#FFFFFF", "#676767", 5)
		})
	});
};
speed, prop e callback sono optional:
speed assente: default 10
prop assente: default "color"
callback assente: default "un tubo"