Here is a solution that works in Chrome and Safari:
Fiddle
Basically, the idea is to have 2 div replayed on top of each other. Bottom provides background and shadow. And above the div just uses a mask to cut out the same text from the background image, so that it covers the text of the bottom element, but not the shadow:
div { position:absolute; top:0; left:0; background-image: url(http://i.imgur.com/EWDVnfb.png); font-family: sans-serif; font-size: 100pt; font-weight: bold; line-height: 2em; padding: .5em; } div.shadow { color: #fff; text-shadow: 0 0 .5em #F00; } div.text { -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
EDIT
I just found a great article on css-tricks.com So there seems to be a solution with much better browser support. The idea is to replace the top layer div and svg containing the same text and use a template to fill the text with a background image, here's a sketch:
<div class="shadow">Test</div> <div> <svg width="400" height="200"> <pattern id="mask" patternUnits="userSpaceOnUse" width="400" height="200" viewbox="0 0 400 200"> <image xlink:href="..." width="300" height="300" /> </pattern> <text x="0" y="1em">Test</text> </svg> </div>
CSS (in addition to the CSS of my solution):
text { fill:url(#mask); }
I tried to get this to work, with partial success. ( DEMO ) But I'm not very good at svg, and someone else can fix it. Anyway, the weakness here is that positioning this correctly and reliably is a real pain, as long as you get it automatically using the Webkit solution.
source share