Question

I have a CAGradientLayer I’m using as a shadow. It fades from 60% opacity to clear, left to right. On the edge of the gradient, it appears to be blending with the layer beneath it and lightening that layer:

There’s a one-pixel wide “glow” at the very end of the shadow, where it’s faded to clear. It seems to make the photo behind the shadow lighter at the tail of the shadow. Here’s a close-up:

This is the code that produces that shadow:

CAGradientLayer *layer = [CAGradientLayer layer];
layer.frame = CGRectMake(sideBar.frame.size.width, 0, 7, sideBar.frame.size.height);
layer.colors = [NSArray arrayWithObjects:
                (id)[[[UIColor blackColor] colorWithAlphaComponent:0.6f] CGColor],
                (id)[[UIColor clearColor] CGColor],
                nil];
[layer setStartPoint:CGPointMake(0, 0.5)];
[layer setEndPoint:CGPointMake(1, 0.5)];
[sideBar.layer insertSublayer:layer atIndex:0];  
sideBar.layer.masksToBounds = NO;

Any ideas on how to get rid of that?

Answer 1

Your eyes are deceiving you. There’s no increase in intensity at the edge of the gradient. You can check- I shrunk the image to 1px height in the cloud region and looked at the color values.

However, the reason you’re seeing a bright line is that shadows don’t look like that. The transparency profile that you’d expect to see would be closer to a gaussian than a straight line (which is what the linear gradient does).

I’d recommend adding a few extra points to ease the gradient into the transparent region. Perhaps something like this

layer.colors = [NSArray arrayWithObjects:
                (id)[[[UIColor blackColor] colorWithAlphaComponent:0.6f] CGColor],
                (id)[[[UIColor blackColor] colorWithAlphaComponent:0.3f] CGColor],
                (id)[[[UIColor blackColor] colorWithAlphaComponent:0.1f] CGColor],
                (id)[[UIColor clearColor] CGColor],
                nil];

You might have to increase the size of the gradient to accomodate this extra blending.