Apple’s Inverted Text Shadow

on Jan 25, 2008

Recently, I’ve started noticing an interesting design change in Apple’s user interfaces, mainly on their site, but also a lot on the iPhone. The design item is an inverted shadow—that is, a shadow falling above, rather than below the text. Here’s an example from their website’s navigation bar:

The normal state of the “iPhone” button:

normal button state

The mouse hover state of the same button:

button hover state

As you can see, the shadow is falling upwards. Why is this? I’m not 100% sure but it seems Apple wants to achive an engraved feel to the text—to make the text seem ‘cut-out’. In the first picture, we can clearly see the effect, achieved using the highlight below the text.

In the second picture, since the text is now white, the only way to keep it engraved would be to apply a shadow to the top. If it was at the bottom it would make the text pop out. It’s an interesting effect that I haven’t seen used very much, but I really like it—makes a nice change to the normal style drop shadows.


  1. Comment by Myles de Bastion — Jan 25, 2008 @ 8:02 pm

    Very observant of you Dmitry.

    I wonder how many designers are going to start copying this effect now?

  2. Comment by Dmitry Fadeev — Jan 25, 2008 @ 8:08 pm

    At least one…ahem ;)

  3. Comment by Piyush — Jan 29, 2008 @ 9:08 pm

    Simple yet effective way to display buttons, good observations Dmitry!

  4. Comment by Peter Green — Apr 29, 2008 @ 9:19 am

    Yes, but how do you do it? (in GIMP).

  5. Comment by Dmitry Fadeev — Apr 29, 2008 @ 1:44 pm

    I don’t use GIMP personally, but this should be similar to Photoshop. You have different ways of going about this — the simplest would probably be to add a drop shadow to the text, then change the shadow color to white (for the first example). In Photoshop you would also change the shadow mode to Normal, otherwise it won’t show the white (because it’s shading the stuff underneath, rather than just drawing the shadow).

    Also just make sure the shadow size is 0, the angle is 90 degrees and the distance is 1 pixel. For the white text/black shadow, just change the angle to -90 and the shadow to black, as well as the text color to white.

    This effect can also be done with CSS3 when more browsers support it (at the moment it will work in Safari). You would use the text-shadow property:

    For the first one:
    text-shadow: #000 0 1px 0;

    For the second one:
    text-shadow: #FFF 0 -1px 0;

    The first value is the color, the second is the x-axis location. Third is y-axis (so we’re moving it down by 1 pixel and up by 1 pixel) and the final is blur. You can increase the blur to make the shadow bigger — 0 has no blur.

  6. Comment by Peter Green — Apr 29, 2008 @ 4:30 pm

    Great, thanks an excellent reply! :-)

  7. Comment by Jack Hoge — Jan 7, 2009 @ 5:48 pm

    I really like this style too and tried it out a while back with a thin inner shadow and bevel instead of a drop shadow. It’s not quite as crisp as the process noted above, but it’s quick and easy.

  8. Comment by Interlock Industries — Sep 6, 2009 @ 10:10 pm

    Wanted to say hello
    Interlock Roofing
    Interlock Industries

  9. Comment by Tunseflelve — Oct 29, 2009 @ 2:48 pm

    Svidjaju li Vam se njena stopala?
    Uclanio sam se na njen site i mogu reci da ima jako lijepa stopala!
    Stopala su na njoj najbitnija stavka!

  10. Pingback by Apples text shadow « Rachel Philogene — Nov 7, 2011 @ 3:50 am

    […] Share this:TwitterFacebookLike this:LikeBe the first to like this post. […]

  11. Comment by the north face skor — Oct 18, 2014 @ 6:11 pm

    Myt: Operating Within the Cold kommer att skada mina lungor
    the north face skor

RSS feed for comments on this post. TrackBack URL

Leave a comment

Contact Information

If you would like a quote or a project proposal, just click here to fill in our short client web form and we'll get right back to you.

Direct Contact Details

Email Email: Skype Tel: +44 (0)20 8816 8876