Inner text shadow with CSS

Question

I am currently playing around with CSS3 and trying to achieve a text effect like this (the black blurry inner shadow):

Answer 1

^{More precise explanation of the CSS in kendo451's answer.}

There's another way to get a fancy-hacky inner shadow illusion,
which I'll explain in three simple steps. Say we have this HTML:

Get this

and this CSS:

h1 {
  color: black;
  background-color: #cc8100;
}

Step 1

Let's start by making the text transparent:

h1 {
  color: transparent;
  background-color: #cc8100;
}

Step 2

Now, we crop that background to the shape of the text:

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
}

Step 3

Now, the magic: we'll put a blurred text-shadow, which will be in front of the background, thus giving the impression of an inner shadow!

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
  text-shadow: 0px 2px 5px #f9c800;
}

See the final result.

Downsides?

• Only works in Webkit (background-clip can't be text).
• Multiple shadows? Don't even think.
• You get an outer glow too.