Text Shadow Effect with CSS3

Question

i have the following designed with CSS:

And I love the way the text sort of sinks into the background, like a depression. Now I tried replicating the same effect using CSS for some other colours:

As you can see it doesn't look as it should like in the first image, the text does not have the same depression or 'sunk in' look as the first image. I tried playing around with the CSS text-shadow effect but i could not get these three to look like the first.

Answer 1

Here is some fairly simple CSS for 'inset' shadow -

.inset {
    color: rgb(50, 50, 50);
    font-size: 50px;
    background-color: rgb(200, 200, 200);
    text-shadow: rgb(175, 175, 175) -1px -1px 0px;
}

<div class="inset">Inset Shadow</div>

You will have to play with the settings to tweak them for your use.

Answer 2

Here is the link for text shadow generation. It is quite compatible with all the major browsers.