CSS3 Text Effect (Text outline and shadow effect)

Question

I am trying to copy a text effect using css3

Here is the image of the text I am trying to copy:

Answer 1

All of those shadows aren't needed, you can achieve the desired affect with just this:

text-shadow: 1px 1px 1px #fff, 2px 2px 2px #111;

Shadow placement works by hierarchy of when it was defined in the statement, so placing the white shadow at the start will layer it on top of the gray shadow and cause it to look like a border.

It's also worth noting that the white border will only display over the shadow and not around the text, thus placing the text on a darker background would show no white border towards the top and left sides of the word.

Answer 2

You can try my code

text-shadow: 1px 1px 1px #FFF, 1px 1px 1px #FFF, 1px 1px 1px #FFF, 1px 3px 3px #000;

if you want shadow black more, you can change 1px 3px 3px #000 to 1px 4px 3px #000 or more