How to apply texture to text with a shadow

Tags: css,text,textures,shadow

Problem :

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(;
.paperText { 
    font-family: 'Slackey', cursive;
    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 {
  text-shadow: 5px 5px 10px #000; 

    CSS Howto..

    How to include a google map in an application

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    bootstrap css, how to make full width div inside container

    How to show list items in menu when hover on the parent's it via CSS? [closed]

    How to use JQuery to identify CSS 'text-decoration' [closed]

    How can i overwrite media queries defined in Bootstrap CSS

    How to Change the Color of Selected Content

    How to load CSS into CodeIgniter

    How to change css style value using php in a for loop?

    How to inserted HTML tag from pseudo-element content: [duplicate]

    How to add dynamic CSS source urls in Squishit?

    JQuery.ready is too late: How do I apply CSS Values with JQuery before Rendering?

    How do you mimic multi row horizontal scroll table behavior with CSS and Divs?

    How to design a cross client / browser compatible email?

    How to read minified CSS?

    CSS: How to make this topheader?

    How to define alternative font-family corresponding to font-size CSS

    How to link to a CSS if a certain condition happens?

    how to solve slideshow css problem?

    How to vertical-align:bottom 2 floated divs with text

    How to put all css files in one file and all javascript files in one file

    How to divide a menu horizontaly between buttons , using CSS?

    How to have div horizontally scroll when resized.

    Hide Show content-list with only CSS, no javascript used

    Issue with changing how containers look based on values in an MD array

    How to create a multi colored circle in html and css

    How can I get my divs to process separately?

    How to make a span tag wider with an alphabet inside?

    How do I make a div take the remaining height of a parent?

    How to add a “new line” after a ZF2 form element?