17

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:

enter image description here

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
Vitaly
  • 4,358
  • 7
  • 47
  • 59
  • 6
    You could use text transparency, but the problem is it will only be transparent through to the inner div, so it'll just fade to solid blue. It won't cut through to the outer div. If the text is static in size and content you might be stuck with using an image instead.. – KP. Jan 31 '12 at 16:18
  • i think its not possible with this div structure CSS only – ggzone Jan 31 '12 at 16:23
  • 1
    Only in webkit I guess: you could use the same gradient on text than on background. Please see (and test :) ) http://stackoverflow.com/questions/4740033/pure-css3-text-color-gradient-is-it-possible – FelipeAls Jan 31 '12 at 16:29

1 Answers1

5

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.

Alex Morales
  • 1,166
  • 9
  • 13
  • Impressive, but I can only see it working in Chrome – My Head Hurts Jan 31 '12 at 17:18
  • Yeah I just tested it in Firefox and it wasn't working there. I would stick with the second technique. It requires an image and some non-semantic html but I've seen it work in most everything. – Alex Morales Jan 31 '12 at 17:25
  • Excellent. Well you def get a +1 from me! – My Head Hurts Jan 31 '12 at 17:31
  • Ha, thanks. I remembered reading up on this a while back. Can't remember why but hey at least it's something. – Alex Morales Jan 31 '12 at 17:34
  • Yes, unlike with image, you still have to specify the text color depending on background. But at least with this technique it's possible to handle gradient backgrounds, not just solid fills. Anyway, that's probably the best thing you can get with CSS, so I'm marking this as accepted. Thanks! – Vitaly Jan 31 '12 at 18:28
  • Thanks, hopefully this will work better soon and we'll have more flexibility. – Alex Morales Jan 31 '12 at 19:03