Creating transparent text to show gradient color o

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

Try this :

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000'); /* For < IE 7 */

-ms-filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000'); /* For >= IE 8 */

Answer 2

There are 2 thing to be covered in IE

For IE10+:

background: -ms-linear-gradient(top, #1e5799 0%,#207cca 27%,#2989d8 50%,#207cca 79%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#207cca 27%,#2989d8 50%,#207cca 79%,#7db9e8 100%); /* W3C */

For IE6-IE9:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

I think it will be easy for you to replace the color codes. I would also suggest you to take a look at ColorZilla for generating the CSS Gradient.

Answer 3

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. <h1> <span> </span> This this heading </h1> 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! :)

Answer 4

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..

Answer 5

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 6

i dont think what you are saying is possible...because you have a parent div whose background is gradient and then you have an inner div whose background is not transparent but black (#000000) nou you have written text on inner div but want font's background as gradient which is in parent div...this is not posiible using css/css3 ...

now i can show you 2 ways (>=IE 9) by following which you can achieve same style with little alteration in your mark-up and css

OPTION 1::(need some photoshop work)

have a <div> set that <div>'s background black.then create gradient photoshop work(ex .png).now set that image as a font/text background using background-clip: text;

webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;

OPTION 2:: (above process is little time consuming ..there is another smarter way)

first have div with black background then write the text in inner div...set inner div's background as gradient then use -webkit-background-clip: text;-webkit-text-fill-color: transparent;

for example ::

MARK-UP

 <div class="black">
   <div class="a">
      CAN YOU SEE THIS? THIS TEXT IS SUPPOSED TO TRANPARENT TO SHOW COLOR OF UNDERLYING DIV SO THAT IT LOOKS LIKE THE "HELLO WORLD" TEXT
   </div>
</div>

CSS

.black{
    background:black;
    overflow:hidden;
 }

.a{
background: #000000 -webkit-linear-gradient(red, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

LIVE EXAMPLE

ALSO CHECK BROWSER COMPATIBILITY OF background-clip AT caniuse.com

OPTION 3::(to make this style for IE8) (this process is simple,straight but not smart because it is IE specific)

create a photoshop work..make a text with gradient effect..now declare a div with black background..and include that image with <img src="" /> tag . :)