title: Gradient text color
body: <p>Is there a generator , or an easy way to generate text like <a href="http://patorjk.com/text-color-fader/" rel="noreferrer">this</a> but without having to define <em>every</em> letter</p>
  
  <p>So something like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.rainbow {
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="rainbow"&gt;Rainbow text&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But not with <em>rainbow</em> colors but generate with other colors (for example white to grey/light blue gradient etc) I can't find an easy solution for this. Any solutions?</p>