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

I've had a few instances where I've needed inner shadows on text, and the following has worked out well for me:

.inner {
    color: rgba(252, 195, 67, 0.8);
    font-size: 48px;
    text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}

This sets the opacity of the text to 80%, and then creates two shadows:

• The first is a white shadow (assuming the text is on a white background) offset 1px from the left and 2px from the top, blurred 3px.
• The second is a black shadow which is visible through the 80% opacity text but not through the first shadow, which means it's visible inside the text letters only where the first shadow is displaced (1px from the left and 2px from the top). To change the blur of the this visible shadow, modify the blur parameter for the first layer shadow.

Caveats

• This will only work if the desired color of the text can be achieved without it having to be at 100% opacity.
• This will only work if the background color is solid (so, it won't work for the questioner's specific example where the text sits on a textured background).