Inner text shadow with CSS

Question

Hey Folks,

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

But I cannot find a way to create text shadows inside the text. I wonder whether it is still possible because the box-shadow element is able to render shadow inside like this:

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

Any ideas?

Answer 1

You can kind of do this. Unfortunately there's no way to use an inset on text-shadow, but you can fake it with colour and position. Take the blur right down and arrange the shadow along the top right. Something like this might do the trick:

background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;

... but you'll need to be really, really careful about which colours you use otherwise it will look off. It is essentially an optical illusion so won't work in every context. It also doesn't really look great at smaller font sizes, so be aware of that too.

Answer 2

Try this little gem of a variation:

text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);

I usually take "there's no answer" as a challenge

Answer 3

This looks like it's working: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

He's using multiple shadows to achieve that effect as explained here: http://www.w3.org/Style/Examples/007/text-shadow#multiple

Answer 4

You should be able to do it using the text-shadow, erm somethink like this:

.inner_text_shadow
{
    text-shadow: 1px 1px white, -1px -1px #444;
}

here's an example: http://jsfiddle.net/ekDNq/