Om de gradiënt letters op jouw scherm te plaatsen, moet je het onderstaande javascriptje in de head-sectie van jouw pagina plaatsen. De html-regel behoort in de body-sectie van de pagina. Geef een willekeurige tag het id "gradient" en plaats de script-regel in de tag. In de functie gradient staan, direct aan het begin, zes getallen. Met de eerste drie bepaal je de startkleur van de procedure, en met de laatste drie de kleur waarmee geëindigd wordt. De cijfers vertegenwoordigen de rgb waarde(n) van de kleur(en).
<script>
var tekstregel = "" , hx = "0123465789ABCDEF", z, x, h, dr, dg, db, fr, fg, fb, cr, sr, sg, sb, cb, cg;
function q(waarde) {
x = Math.floor(waarde / 16);
h = hx.charAt(x);
x = waarde % 16;
h += hx.charAt(x);
return h;
}
function gradient(dr, dg, db, fr, fg, fb, letter) {
z = letter.length;
cr = dr;
cg = dg;
cb = db;
sr = (fr - dr) / z;
sg = (fg - dg) / z;
sb = (fb - db) / z;
for (var x = 0; x <= z; x++) {
tekstregel = tekstregel + '<span style="color:#' + q(cr) + q(cg) + q(cb) + '";">' + letter.charAt(x) + '</span>';
cr += sr;
cg += sg;
cb += sb;
}
document.getElementById("gradient").innerHTML = tekstregel;
}
</script>
<p id="gradient"><script>gradient(0,0,200,0,200,0,"Jouw tekst");</script></p>