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

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

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

Answer 5

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 6

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.