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 this in webkit-browsers only. But i need a Cross-browser solution which has backward compatibity till IE8 atleast.

I know how to generate the gradient. That is not an issue. In the fiddle i have only created gradient for webkit browsers but i know how to do it for IE too. My main issue is how can i make the text transparent so it shows me the gradient of the underlying div.

No JS/jQuery solutions please.

CODE

HTML

<div id="div1" style="width:200px;height:200px"></div>
<div id="div2" style="width:200px;height:200px">CAN YOU SEE THIS? THIS TEXT IS SUPPOSED TO HAVE COLORED GRADIENTS LIKE THE HELLO WORLD TEXT</div>

CSS

#div1 {
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, rgba(251, 223, 147, 1) 100%);
}
#div1 {
    z-index:-100;
    position:absolute;
    left:0px;
    top:0px;
}
#div2 {
    z-index:100;
    left:10px;
    top:10px;
    background: black;
    text-align:center;
    font-size:20px;
    color: rgba(255, 255, 255, 0.5);
    position:absolute;
}

EDIT: I believe my question is not clear . I Know about gradients. I want my text to be transparent so that the gradient of the div below can be shown on the transparent text.

Something like this example

Answer 1

You could use SVG, its a little outside the box, but its cross browser compatible and gives you some more options.

Working Example

<svg height="50">
    <linearGradient id="g1" x="0%" y="100%">
        <stop stop-color="blue" offset="0%" />
        <stop stop-color="green" offset="25%" />
        <stop stop-color="yellow" offset="50%" />
        <stop stop-color="orange" offset="75%" />
        <stop stop-color="red" offset="100%" />
    </linearGradient>
    <text font-size="40" fill="url(#g1)">
        <tspan x="10" y="40">Hello World!</tspan>
    </text>
</svg>

Tested and working in Chrome, Firefox, and IE9

If you've really got your heart set on a cutout effect, it can also be done with SVG.

Working Example 2

<div class="wrap">
    <div class="black">
        <svg width="300" height="100">
            <mask id="cutouttext">
                <rect width="280" height="50" x="0" y="15" fill="white" />
                <text x="50%" y="55%" text-anchor="middle" font-size="48">Hello World</text>
            </mask>
            <rect width="280" height="50" x="25" y="15" fill="black" mask="url(#cutouttext)" />
        </svg>
    </div>
</div>

Fall back for IE8 and below:

<!--[if lt IE 9]>
    <style>
        .wrap {
            color: #ff0000;
            font-size:48px;
            text-align: center;
            padding-top: 10px;
            height: 90px;
        }
        .black {
            background: black;
            margin: 0 auto;
            width:250px;
        }
    </style>
<![endif]-->

The way it looks in modern browsers:

and how it looks in IE8 and below:

Documentation:
MDN SVG Gradients
MDN SVG Text
MDN Mask

Answer 2

I think you are looking for background-clip. The catch is that you need to use an image, you can't use a css gradient afaik

update: it's only supported on webkit though..