Tag Archives: embossed text

Embossed Text

Embossed text is similar to the engraved text effect, but the text appears higher than the surface, instead of lower. This can also be achieved with the CSS3 property text-shadow.

You can add this CSS to any selectors with text where you want this effect.

/* Darker text on medium background */
color: #333;
background-color: #666;
text-shadow: 0px -1px 0px rgba(255,255,255,.5); /* 50% white from top */

/* Medium text on lighter background */
color: #666;
background-color: #aaa;
text-shadow: 0px 1px 0px rgba(0,0,0,.5); /* 50% black coming from the bottom */

The main difference is the direction of the shadows. If the shadow comes from the bottom in an engraved effect, it will come from the top to emboss, using the same colors.

Personally, I find the inset or engraved text effect nicer looking. However, the specific colors that you use, may give different results, so experiment to get the best effect.