Design Details: Inset Text Shadows

As browsers like Safari and Firefox have started supporting the text-shadow property, I’ve found myself using it more and more to add subtle dimension to my text. The best way to do that is making your text look inset. There are only two techniques; and while they’re pretty simple, it’s important to get your shadows and colors going the right direction.

Inset Text on a Light Background

inset2

A couple of things to remember here. First, the background needs to be light enough to see the dark text on top of it, but not too light. This inset uses a white shadow, and if the background is too light you won’t be able to see it. The text-shadow will go down 1px and to the right 1px. This way it looks like the light is coming from the top left and highlighting the bottom right corner of the text. The code is pretty simple, set a color, offset for horizontal and vertical and a blur value. We’ll be keeping it to 0 to get a nice clean edge for inset text.

 text-shadow: #fff 1px 1px 0;

If it’s too harsh, you can adjust the color of the shadow to be somewhere in between white and the background color.

Inset Text on a Dark Background

inset1

This one’s a little easier. Just make a dark background and light text. This time we reverse the shadow position and inverse the color. So we have a dark shadow 1px top and 1px left. You probably won’t want to use black here. Find a mixture of black and the background color.

 text-shadow: #000 -1px -1px 0;

The text-shadow property isn’t supported in all browsers, so you need to make sure your shadow isn’t a crutch that the design depends on. A bad example would be white text on a very light background. Sure the shadow helps it stand out but it will be virtually unreadable in Internet Explorer without it.

inset4

Above all, the key to this technique is subtlety. We don’t want highlights or shadows that stick out like a sore thumb. They should just add a hint of depth.

About: Jonathan Longnecker

jonathan longneckerJonathan Longnecker is the co-founder of FortySeven Media
– a kick awesome design firm specializing in web, print and media creation. Jonathan loves simple designs that communicate quickly, and is fanatical about the details that sets their work apart. Find him on twitter (@necker47), and on the web at fortysevenmedia.com.