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.

18 Comments

  • Marco (June 11, 2009)

    Interesting article, especially with the CSS3 approach (I do miss the HTML part, but I understand your code).

    It is only viewable with "large fonts". Another approach could be something like sIFR (where Flash would replace it with a "text embossing" font) or a JavaScript/PHP combo. These last will still be SEF.

  • Janko (June 11, 2009)

    Marco: Yes, only large fonts would look nice using CSS, so this technique should be reserved for headlines and titles. If you omit dark shadow and use only the light one, then even the text in smaller fonts can look fine. I don’t know about doing it with flash, didn’t try it :)

  • Ruud (June 11, 2009)

    Good article Janko. I do it in Photoshop as well, but usually take Blending Options > Bevel and Emboss (choose Direction ‘down’ for inset text). In this panel you can play with the angle, the border color and thickness, the opacity and much more to create the best inset (or outset) effect to suit your needs.

  • Kent Aldrich (June 11, 2009)

    After spending 20 years printing letterpress work here at the Nomadic Press in St. Paul, Minnesota, it is fun to see the (now nearly 600 year old) tradition of letterpress printing moving, in faux form, into the electronic 21st century. With the addition of a textured background, to simulate the sensuality of a handmade sheet of paper, the illusion is complete and stimulates a continued interest in the real thing. Thanks for thinking letterpress!

  • Malte Hansen (June 11, 2009)

    You should show the technique where two (or three) layers of the same text are positioned almost on top of each other..

    That would work in alot of browsers, (though i admit its a little buggy, but if it works :)

  • Mario Luevanos (June 12, 2009)

    In CSS, you can also do it this way:

    HTML
    ————–

    <h2>Easy!
    <span>Easy!</span>
    </h2>

    CSS
    ————-

    h2 {color:#FFF ; position:relative;}

    span { color:#000000; left:0; position:absolute; top:-1px; }

  • sonichtml (June 12, 2009)

    Nice~ thank you for shared..

  • Patternhead (June 12, 2009)

    Nice tut, thanks for sharing.

  • Csaba (June 16, 2009)

    Thanx Janko, great as always.. Simple and descriptive at the same time.

  • aravind (June 25, 2009)

    Amazing result!
    Thanks for sharing it Janko.. :)

  • Ali Hussain (July 22, 2009)

    Thankyou great share. Subscribed to your blog

  • html (July 26, 2009)

    Mario Luevanos – but if useing clear xhtml/css as you told, it does not look fine as image fonts ;)

    thanks for the article.

  • SJL Web Design (July 27, 2009)

    Thanks for the great tutorial, was very precise and easy to follow and the effect is extremely useful.

  • yosry (July 27, 2009)

    nice tutorial thank you

  • Firebubble Design (July 28, 2009)

    Very nice text effect Janko, thank you for the top notch tutorial.

  • Webdesign Hamburg (September 2, 2009)

    Your embossed text looks fantastic. It’s a shame that the text-shadow property is not supported in Internet Explorer, and that’s why I am not using it. Your article *may* have changed my mind about this though.

  • Alex Similou (September 30, 2009)

    Creating embossed text is a matter of 3 minutes in Photoshop but as you’ve said, the output is an image, not a plain text. It’s bad, but… the CSS text-shadow doesn’t work in IE, and too many people still use it as a primary browser.

    I’d recommend to use an image variant OR if you like CSS too much – create a condition in CSS for IE: if a user uses IE, the text shold be in visible (contrast) colors.

  • Daniel (October 18, 2009)

    realy nice tutorial, big THX !!