I've been using the following CSS rule…
.inset-shadow {
color: Transparent;
background: #8C2633;
text-shadow: rgba(255, 255, 255, 0.4) 2px 2px 2px, 0 0 0 rgba(0, 0, 0, 0.5);
}
… to produce the following result:
The following is another example of this text effect…
…which can be found in the following exercise on CodePen
The problem is that the behavior of this construct is inconsistent. Specifically, the Microsoft browsers are having difficulty displaying the text when I use the "transparent" value for the CSS color property. Subsequent research would indicate that there is no such value for the color property. I tried replacing the "transparent" value with the CSS rgba function with something like this: rgba(255, 255, 255, 0.0) – but it didn't work.
I have found variations on the theme, but they aren't as effective. I'm not sure that there is a solution, but if I can get the code to work in Microsoft browsers, that would be preferable.