Currently the mask effect only works in Webkit browsers like Chrome and Safari, but the rest of these effects work in Firefox as well!

CSS

Now the :before pseudo element doesn’t actually create a physical element, but places whatever you want before the element you apply it to. We want it to act like a shadow, so we want it to appear below the original text layer. First off, lets apply some styles to the .text element.

Notice we’re applying mask-image, which is only supported by webkit. It’ll let us get the effect we’re looking for, in Safari and Chrome anyway. All other browsers will just ignore that line.

Finally we’re just going apply some styles to the :before psuedo class. Now you may have noticed that the top of the text is now transparent. To fix that we’re going to use the :after pseudo class to place another bit of text directly below the original.

The content is whatever we want to appear before. We’ve positioned them absolutely, so it’ll stay on top of the original text. Then we just move it down by 4px, change the colour and add a text shadow. You can alter the colour and everything, to make it look nicer! Check out the Preview below to see!