Search code examples
csstexttexturesshadow

How to apply texture to text with a shadow

I am trying to style some text to look like a paper cut-out by adding an image texture and a drop shadow.

I have applied an image texture to the text using CSS; however, when I try to add text-shadow the shadow appears in front of the text rather than behind it.

@import url(https://fonts.googleapis.com/css?family=Slackey);
.paperText { 
    font-family: 'Slackey', cursive;
    background:url('http://i.imgur.com/sEWJZF2.jpg'); 
    font-size:60px;
    text-align:center;
    color:transparent;
    -webkit-background-clip:text;
    text-shadow: 5px 5px 10px #000;
}

<h1 class="paperText"><HEAD>Texture</HEAD></h1>

How can I get the shadow to appear behind the text?

Solution

  • I don't think it's possible to do that on the one element. What you can do is create another element to handle the text-shadow and then layer that behind the original.

    .paperText:after {
  position:absolute;
  top:0;
  left:0;
  color:#fff;
  content:'Texture';
  z-index:-1;
  text-shadow: 5px 5px 10px #000; 
  text-align:left; 
}

    https://jsfiddle.net/3tkm7gj7/1/