Creating transparent text to show gradient color of underlying div

Question

I am trying to create gradient text with plain HTML and CSS. Something like the text below

Check the FIDDLE. It is self explanatory.

I know how to achieve th

Answer 1

Following trick will only work if your text/content is on solid background.

I'm summarizing points from this blog post

1. Put an empty span with in the text container, for eg.

   This this heading

   etc.
2. Embed background-image [png] through css to this span
3. And position it absolutely, upon the text.

It works in IE6 onwards, but IE PNG hack is required!

Hope it helps! :)