Drop shadows on text

UILabel is built with a handy shadow feature, but it doesn’t always look the way you might want – in this post I’ll describe the


subclass which draws nicer shadows.  (Code links below.)

Default UILabel shadows

This code:

generates a shadow that looks like this:

It’s not the end of the world, but it’s still kind of a butter shadow.  I use these more for relatively subtle accents on labels in buttons.  For example, you can improve the appearance of a label on a button by making the text look more embossed:

I think the text on the left, with the shadow slightly above the text, makes it appear depressed into the surface, which is more visually appealing than the plain text on the right.  Apple consistently works with their highlights and shadows in iPhone OS as if there is a global light source directly above the device, so users are likely to interpret shadows according to a straight-above light.




is a drop-in replacement of


(a subclass of it) which automatically draws dark, slightly-translucent, shadows beneath all text.  This code:

generates this:

Much nicer!

The color, position, and blur can all be adjusted.  For example, you could use the same class, with slightly changed parameters, to get this result:


works by overriding the


method of


, along with the


function.  Say goodbye to butter shadows!

Code and References



Related stackoverflow question

Quartz 2D shadow reference

UILabel drawTextInRect: reference

Post a Comment

Your email is never published nor shared. Required fields are marked *