CALayer Shadows

Here’s a neat little piece on how to produce efficient shadow effects using a CALayer’s shadowPath property:

Fun shadow effects using custom CALayer shadowPaths

The what property, you ask? Yep, we’d missed it so far too, but it seems pretty useful:

I recently had to improve the performance of a few views that utilized CALayer-based shadows on rounded-rect UIView objects. On this particular iPad application, when the device was rotated, the views rotated quite a lot slower than we would have hoped. It wasn’t a show-stopper, but the jerky rotation animation made it look cheap and unpolished. The easiest way to have our cake, and eat it too, was to set a custom CGPath to the layer’s shadowPath property. This told UIKit to set the inside of the path to opaque, reducing the amount of work the rendering engine needed to perform…

And especially useful since it can be an arbitrary path, not just layer bounds! The sample code with the article shows how to make, for instance:

Trapezoidal shadow – depth illusion


Elliptical shadow – top down light source illusion


Paper curl effect


Nifty stuff from minimal coding, indeed!


For more CALayer info, note this as always excellent tutorial from Ray Wenderlich:

Introduction to CALayers Tutorial

2 Responses to “CALayer Shadows”

  1. 1 umar Jan 8th, 2011 at 6:04 am

    Nice code.
    Can I create this type of effect on UIView
    check this link
    http://www.flickr.com/photos/[email protected]/5323036634/

    please write the code for that:)

  1. 1 Tweets that mention CALayer Shadows at Under The Bridge -- Topsy.com Pingback on Dec 5th, 2010 at 1:49 am

Leave a Reply