title: Vertical Text Gradient With Opacity
body: <p>I'm trying to achieve the following with CSS3 or jQuery or SVG or canvas but I'm having some difficulties.</p>
  
  <p><img src="https://i.stack.imgur.com/B3b4d.jpg" alt="enter image description here"></p>
  
  <p>Four things that should be noted:</p>
  
  <ol>
  <li>The gradient of the text is veritcal, and there is opacity involved</li>
  <li>The text could be multi-lined (it's client inputted)</li>
  <li>There is an outline around the text (text shadow would probably be appropriate. IE support isn't needed.)</li>
  <li>There is a background image behind it.</li>
  </ol>
  
  <p>The easiest solution is <code>-webkit-linear-gradient</code> but as much as I love Webkit, I feel I have a responsibily as a developer to support Firefox, Opera and IE to some extent. </p>
  
  <p>Chris Coyier used in in his <a href="http://css-tricks.com/snippets/css/gradient-text/" rel="nofollow noreferrer">demo</a> and I added a background image to show it in action:</p>
  
  <p><img src="https://i.stack.imgur.com/PJKJx.jpg" alt="enter image description here"></p>
  
  <p>Since there doesn't appear to be a cross browser alternative at this time, I will turn to JavaScript and the popular jQuery for answers. Which there are few.</p>
  
  <p>The first is a neat plugin from MRNIX called PXGradient. You can <a href="http://mrnix.ru/pxgradient/" rel="nofollow noreferrer">checkout his website</a> but it's all in Russian. Basically to use that script you enter an array of HEX values and it finds the middle points between them, created a <code>&lt;u&gt;</code> tag and a wackload of <code>&lt;s&gt;</code> tags in them, all with the content of the parent text. It creates a nice effect.</p>
  
  <p><img src="https://i.stack.imgur.com/aUDPC.jpg" alt="enter image description here"></p>
  
  <p>While it does support text shadows and background images, it doesn't support opacity. I have came across several other plugins that do this similar hex to hex transition, but none of them support rgba from what I could find.</p>
  
  <p>Stackoverflow comes up with <a href="https://stackoverflow.com/questions/5498601/making-an-opacity-text-gradient-over-a-transparent-background">this related question</a>, and references Cufon. Cufon is great but doesn't allow text shadows. </p>
  
  <p>SVG also comes up, in which I found <a href="http://codepen.io/yoksel/pen/xmshn" rel="nofollow noreferrer">this example</a> but SVG must be a current width and height in which I don't know what this text will be (it's inputted by the client).</p>
  
  <p><img src="https://i.stack.imgur.com/FclFC.jpg" alt="enter image description here"></p>
  
  <p>(Unless we can get the height and width of the text and append SVG dynamically. But my SVG knowledge is pretty terrible so I might need some help with that.)</p>
  
  <p>I have looked at CSS options, jQuery plugins, SVG and canvas and I'm not having much luck.</p>
  
  <p>Does anybody have an idea about what I can use? Any solutions will be helpful.</p>
  
  <p>Cheers!</p>