Databases
StackOverflow2013
Postsdbo
POCreating transparent text to show gradient color of underlying div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating transparent text to show gradient color of underlying div
    text
    copied!<p>I am trying to create gradient text with plain HTML and CSS. Something like the text below</p> <p>Check the <a href="http://jsfiddle.net/marsone/ZYYsj/2/" rel="nofollow">FIDDLE</a>. It is self explanatory.</p> <p>I know how to achieve this in webkit-browsers only. But i need a Cross-browser solution which has backward compatibity till IE8 atleast.</p> <p>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.</p> <p>No JS/jQuery solutions please.</p> <p><strong>CODE</strong></p> <p>HTML</p> <pre><code>&lt;div id="div1" style="width:200px;height:200px"&gt;&lt;/div&gt; &lt;div id="div2" style="width:200px;height:200px"&gt;CAN YOU SEE THIS? THIS TEXT IS SUPPOSED TO HAVE COLORED GRADIENTS LIKE THE HELLO WORLD TEXT&lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>#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; } </code></pre> <p><strong>EDIT:</strong> 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.</p> <p>Something like <a href="http://css-tricks.com/image-under-text/" rel="nofollow">this example</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload