Используйте svg!)
Градиент

<svg style="display:none">
		    <defs>  
		        <linearGradient id="textgradient" x1="0%" x2="300%" y1="0" y2="0">  
		            <stop stop-color="#1dcbb0" offset="0%"/>  
		            <stop stop-color="#2ecc72" offset="33%"/>  
		            <stop stop-color="#2394e4" offset="66%"/>  
		            <stop stop-color="#1ccab4" offset="100%"/>  
		        </linearGradient>  
		    </defs>  
		</svg>

Вставляем куда нужно и ставим любой текст

<svg fill="url(#textgradient)">     
         <text>Отправить</text>  
</svg>

Пример
https://jsfiddle.net/swjzanjb/
Я вынес градиент отдельно и обращаюсь к нему fill="url(#textgradient)". Соответственно можно лепить сколько угодно :)
Поддержка caniuse.com/#feat=svg-html5