Creating transparent text to show gradient color of underlying div


Tags: html,css

Problem :

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



Solution :

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:
enter image description here
and how it looks in IE8 and below:
enter image description here

Documentation:
MDN SVG Gradients
MDN SVG Text
MDN Mask


    CSS Howto..

    How to use a different stylesheet for iphone or android? I can modify only html later on

    How to remove css and javascript code in source code of website

    How to search a particular text within an HTML Text and highlight the search string with a color

    Calculating percentages for 10 or more images in a CSS3 slideshow

    How to display a centered background of fixed width

    How to override background-color for all classes using css?

    How to link my HTML file to my CSS file [closed]

    How to Decrease Image Brightness in CSS

    How to get On/Off FlipSwitch to trigger function

    How to add a class to a bar using jQuery?

    how do responsive recaptcha images

    How to get rid of spaces with CSS

    How do I change the Default Design? [closed]

    How to dynamically remove all unwanted CSS and JS from page

    How to Auto set the height of a div using the height of another div

    How to better write complex styles to an element via javascript?

    How to get cards with his content perfectly alligned

    CSS Overflow: overlay. Is it deprecated? How can I replace it?

    How to cancel left or right rules with an !important tag?

    Symfony3 - how can I add a photo using Symfony

    How to give same style to first 2 paragraphs differently in css

    How does one create a div that extends to the bottom of the page?

    How to create gradient background with CSS in Firefox < 3.6?

    How to select an item that is into another item using CSS?

    How to center this stuff inside a link using CSS?

    How do I force an image to be responsive using CSS so it stays in the same position?

    How do I add a special CSS class to run only on IE for a div component?

    How to reverse a jQuery animation back to original CSS properties

    How to centre fluid image and a caption using CSS Flexbox?

    How to change a span to look like a pre with CSS?