Embossed Text Effect
CSS3 embossed text effectusing just text-shadow
. Here, I have used two diagonal text shadows, one for the highlight (-1px -1px 0px rgba(255,255,255,0.3)
) which is white in color and another one for shadow (1px 1px 0px rgba(0,0,0,0.8)
) which is black in color.
There's only one important thing to note, the color of the text should match the color of the background it's placed upon otherwise it will not look good. Transparency is also important but not required if you do not want a watery or glass effect. Take a look at the code to understand more.