iOS Icon Drop Shadow Tutorial

In the “About” screen of each of my apps I display the app’s icon with a nice drop shadow under it to give the icon that tangible feeling.

Icon with drop shadow

Today I thought I’d share the technique I use to achieve this effect.

In your project, add the QuartzCore framework to your main target. You’ll need this to help you reference your icon view’s layer property (CALayer) which is responsible for rendering the drop shadow.

Once you’ve done that add the shadow effects you see in my code below to your icon initialization logic…

iOS Icon Drop Shadow

Some items to note about the above sample:

  • The shadow color is a translucent black.
  • The shadow is 2 points lower than the icon and has a 2 point radius.
  • Clipping to bounds is turned off so the shadow is not clipped off.

I encourage you to experiment with these settings to find the right look for your icon or image.

Comments are Disabled