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.

About the author

jayfuerstenberg I create software to scratch personal itches and then polish it for you to enjoy! I believe simple design is sexy, craftsmanship is a lost art in desperate need of a revival and that the old fashioned way of doing business is best. Armed with stockpiles of coffee and great feedback and trust earned from people like you, I intend on staying the course, righting the wrongs and getting a nice buzz all the while. By Jay Fuerstenberg Google+

Comments are closed.