title: How can I do a text gradient with a drop shadow on a gradient background?
body: <p>Here's what I need to pull off in CSS (it's terribly ugly, but it shows my problem well as an example):</p>
  
  <p><img src="https://i.stack.imgur.com/umXUh.png" alt="Gradient example"></p>
  
  <p>We've got a gradient over text with a drop shadow on a background that has a slight gradient.</p>
  
  <p>I've tried every method I could find. </p>
  
  <p><a href="http://css-tricks.com/snippets/css/gradient-text/" rel="nofollow noreferrer">This method</a> won't work with a text-shadow.</p>
  
  <p>The PNG overlay method won't work because I don't have a solid color background.</p>
  
  <p><a href="http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/" rel="nofollow noreferrer">This method</a> won't work because it requires me putting the text string in the CSS and my text will be dynamic.</p>
  
  <p>So, I'm stumped.</p>
  
  <p>It doesn't need to work in every browser (I'm fine with ignoring IE, if necessary). If it only works in Webkit browsers, that'd be fine as well.</p>