Question

Say, we have:

<div class="outer">
    <div class="inner">
        <span class="text">Hello!</span>
    </div>
</div>

The ‘outer’ div has a linear gradient background.
The ‘inner’ div has a blue background.
Is it possible to make text color the same as color of the ‘outer’ div. Sort of a text mask effect:

Answer 1

You can fake it by using the text transparency KP mentioned. First, you apply the same gradient to the span as you have on the outer div. Then, you apply the blue background to the inner div and the text will look like it’s been knocked out. I have a sample fiddle here. Here’s an article that details the technique.

Remember, this first technique will NOT work in IE. If you do want to achieve a similar effect in IE as well you can use the technique shown here. This technique requires a png, and some extra markup but it does appear to work everywhere. Since this isn’t a real text mask, you may have to play with it a bit to get it just right.

Update: Further testing shows that Firefox doesn’t display the first technique… I would stick with the second but then it’s no longer just CSS, it does require an image.