Question

Creating dark inset text is simple. You just write the same word twice (using text-shadow in this case) but the second time you write it drop it down and to the right a little bit and write it in a lighter color with some opacity. Easy once you figure it out.

The problem I am having is with white inset text. There is no color whiter than white so there is no way to create the illusion of more light being at the top than down inside the inset character. The best I can come up with is white outset text but I want white inset text.

.dark {
    color:rgba(0, 0, 0, .6);
    text-shadow:2px 2px rgba(255, 255, 255, .1);
}
.light {
    color:rgba(200, 200, 200, 1);
    text-shadow:2px 2px rgba(0, 0, 0, .2);
}

​

fiddle

Found an answer on IRC fiddle
the light is hitting from the top left so it looks darker where the tl z axis would be

Answer 1

You just have to try different combinations. I have also used multiple text-shadows to do inset text styles.

I prefer just doing this for your light style:

text-shadow:1px -1px rgba(0, 0, 0, .2);