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.

9 thoughts on “Engraved Text with CSS

  1. Pity about IE, otherwise I would like to use this. I was searching for “CSS engraved text” and found your site … which I must say is beautifully presented and crystal clear. Thanks!

    1. Why fret IE? It doesn’t hurt anything if you use it and about 60% of your market gets a beautiful page. IE continues to suck its normal suckage, no worse for wear.

  2. Hi,

    Thanks for this great tutorial, can you help though. I’m trying to create this effect but with white text on a dark blue background for my H1.


    1. Steve,

      I don’t think this technique will work very well with that much contrast/difference between the text and the background. Part of the technique is using colors that are somewhat similar, so it just looks like the text is inset (darker) or raised (lighter).

      There are probably other effects you could create with the shadows, but I don’t think engraved or embossed will work with those colors.

  3. I tried to reproduce the display. However, I did not know what type of font and font size you used. In addition, when I try it, I have the background to the right of the text also colored. Should I experiment with div tags, etc.?

    Your reply will be appreciated.


    1. Bill,

      I’m sorry for the very late reply. The normal comments sometimes get lost in the spam.

      If you look at the demo you should be able to “inspect” the code on that page depending on the browser you are using. http://css-snippets.com/demos/engraved-text.html

      With google’s Chrome just hit F12 and you can get into Developers mode.

      I’m using Century Gothic. This technique should well with any sans-serif font. A serif font will work too, but some might be too busy. You just need to experiment. Using the Developers mode is a good way to experiment, because you can play with different sizes, fonts, etc.

      ~ Lisa

  4. It is an amazing effect of optical illusion. But yes, the colours matter.
    However, I don’t think RGBA() is to be used in normal occasions. It will be a problem while handling old browsers too (yes, we can use two lines featuring RGBA() and direct hexadecimal value).

Leave a Reply

Your email address will not be published. Required fields are marked *