Here an ugly implementation in canvas. I tried this solution, but the results are worse than I expected, so here it is anyway.
$("div").each(function() { var CHARS = $(this).text().split(''); $(this).html(""); $.each(CHARS, function(index, char) { var canvas = $("<canvas />") .css("width", "40px") .css("height", "40px") .get(0); $("div").append(canvas); var ctx = canvas.getContext("2d"); var gradient = ctx.createLinearGradient(0, 0, 130, 0); gradient.addColorStop("0", "blue"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("0.51", "red"); gradient.addColorStop("1.0", "red"); ctx.font = '130pt Calibri'; ctx.fillStyle = gradient; ctx.fillText(char, 10, 130); }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Example Text</div>