Two simple ways to create text embossing effect

June 11, 2009

Embossing is very popular trend in web design (the actual term for this effect is “inset”, although many people call it embossing). In the same time it is very simple to create. This short tutorial will show you how to create this effect usng pure CSS and using Artweaver.

CSS version

The easiest way to create the effect is by using CSS text-shadow property. Although there are tutorials that explain how to achieve this, there are a few things that need to be considered. First let’s see how to do the embossing, or to be more correct “inset” effect. By using text-shadow we can simulate light shadow on the bottom and dark shadow on the top of the text.

.inset { text-shadow:#fff 0px 1px 0, #000 0 -1px 0;}
span { line-height:3em; font-size:3em; font-weight:bold; color:#808080;} 

This is how it looks like in Safari:


In the example above, inset class defines two shadows. The first one is light shadow (white color, positioned 0px to the right of the text, and 1px below the text) and dark shadow (black color, positioned 0px to the right of the text, and 1px above the text). Third parameter defines shadow blur. In this example I set it to 0, but you can experiment with it in order to get different results.

One important thing is that this effect can be seen only in browsers that support CSS3. For now, it will work in Firefox 3.1, Safari, Google Chrome 2 and Opera 9.5. This means that you should be careful when setting text color. People tend to set text color similar to the background color (A). This means that it will be very hard to see it in browsers that don’t support CSS3 (B).


Advantage of this approach is that you can apply this effect to a dynamic content and avoid creation of images. Downside is that CSS3 is not supported by all browsers (yet).

Artweaver version

There are many tutorials that explain how to create this effect in Photoshop or other popular software, but I thought it will be fun to do it in Artweaver. Artweaver is a freeware photo-manipulation software (and even more than that). Although it hasn’t capabilities of Photoshop, it is very good free alternative.

So let’s start by creating new document as shown in the image below:

Next, set gray foreground color, select gradient tool (from the toolbar) and create a gradient (as seen in the images below).

Using text tool (from the toolbar) and by choosing slightly darker gray color add some text. Set text opacity to 50% (image below).


Next two steps will be very simple. To create light shadow, duplicate the text layer (Layer  -> Duplicate layer) and move it behind the text layer. Set its color to white and move it one pixel below the text layer. You can do it by moving the layer with cursor keys. To create dark shadow, duplicate text layer once again and move it behind the light shadow layer. Set its color to black and move it one pixel above the text layer. You are now done and you should see something similar to the image below.

Although the edges in this example look better and smoother than the ones in CSS example, you will have to create images instead of using pure text. How do you create this effect?

Let's discuss this on twitter.

Before you leave