Попробуй это, как вариант.
<!DOCTIPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{font: 24px Arial;}
.test{
margin:0;
padding:0;
color:transparent;
white-space: pre;
position:relative;}
</style>
</head>
<body>
<div>текст текст текст <span class="test">Текст в span</span>. Текст дальше</div>
<script>
var test= document.querySelector(".test");
var w=test.offsetWidth;
var h=test.offsetHeight;
var textMy = test.innerHTML;
var textElem = document.createTextNode(textMy);
var canv = document.createElement('canvas');
canv.id = 'myCanvas';
canv.width = w;
canv.height = h;
canv.style = "position:absolute;left:0;z-index:-1";
test.insertBefore(canv, test.firstChild);
var computedStyle = getComputedStyle(document.body);
var ctx = canvas.getContext('2d');
ctx.font = computedStyle.font;
var gradient = ctx.createLinearGradient(0, 0, w, 0);
gradient.addColorStop(0, "rgb(255, 0, 128)");
gradient.addColorStop(0.5, "rgb(0,0,255)");
gradient.addColorStop(1, "rgb(255, 153, 51)");
ctx.fillStyle = gradient;
ctx.textBaseline = "bottom";
ctx.fillText(textMy, 0, h);
test.appendChild(canv);
</script>
</body>
</html>
Простой
Средний