Tag Archives: text-shadow

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.

Engraved Text with CSS

An engraved text effect (where text appears lower than the surface) can be done with the CSS3 property text-shadow.

See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.

See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.

See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.


The parameters of text-shadow are listed below in the order they must appear in your CSS.

Horizontal Offset

For this effect, leaving the horizontal offset at 0 allows the shadow to come from one direction only (vertically) which provides a cleaner look and better effect.

Vertical Offset

When using the darker text on a medium background, it usually works best to use a lighter shadow coming from below. This makes the text look like it is lower than the surface. When using lighter colors, a darker shadow coming from above, gives the same effect. Making the shadow come from above is achieved by using a -1 in the Vertical offset.
text-shadow: 0px -1px 0px rgba(0,0,0,.5);

Blur Radius

You don’t want any blur on the shadow for this effect, so the value is 0.


The last value is the color of the shadow. I am using RGBA colors, which is a combination of the R, G, and B values (you can get these from the Photoshop Color Picker) and the Alpha Transparency. All browsers that support text-shadow also support RGBA values.

You don’t need to use RGBA values; you could try a medium-dark grey color in this example instead. However, using transparency for the shadow, will allow some of the original color to shine through and generally provides a nicer effect. This is especially useful when you are using this effect on colors.

Two Part Shadows

You can sometimes get even better results by using two text-shadows on the text – one dark shadow and one light shadow. You can specify two different shadows on your elements by separating them with a comma. I have found that two shadows are not usually necessary when using greys, but they can be useful with colors.

The third example in color has just one shadow:
text-shadow: 0px 1px 0px rgba(255,255,255,.5);

In the fourth example, I used two shadows, and different opacities, with better results.
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);

Browser Support

This works in all modern browsers. It does not work in IE9 and below.

There is a filter property than can be used on Internet Explorer, that sometimes works, but sometimes produces ugly results. You can experiment and try to find some values that work.

If you would like to read more about using IE shadows to try to make it work, try these articles: Drop Shadow on all Browsers and RGBA Generator of IE

To support IE browsers, you must choose from the following:

  1. Make sure the text looks fine without the Inset effect. This means making sure there is enough contrast between the text color and background color.
  2. Create an image of your inset text headers, and apply them as background-images in style sheet specific to IE only. If you do this, you may decide to skip the CSS solution altogether. However, CSS solutions mean less images to download, so there is a savings for using CSS when you can.
  3. Try using the filter commands for IE, but make sure to text and see if things still look OK.

What text will look like in IE. Make sure things are still legible.