Gradient / shadows in UIImageView like Flipboard

Question

I'm looking to create a shadow-like-gradient in my UIImageView like how it is in Flipboard.

An example of it is a picture in the this image

As you can see on the right iPhone, there is a darker gradient at the top and bottom. This is so that if the picture is white, the white text can still be seen.

Anybody have any suggestions on how I can implement this? I am new to iOS development thus clueless about this. Thanks!

how can you do just the bottom? – SleepsOnNewspapers May 15 '15 at 18:20 — SleepsOnNewspapers, May 15 '15 at 18:20

Rob · Accepted Answer · 2013-09-02T07:11:07.063

You could use CAGradientLayer:

Add QuartzCore.framework to your project. (See Linking to Library or Framework).
Import the QuartzCore header:
```
#import <QuartzCore/QuartzCore.h>
```

Add a CAGradientLayer to the view in question. For example, for a simple gradient from gray to white:

- (void)addGradientToView:(UIView *)view
{
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = view.bounds;
    gradient.colors = @[(id)[[UIColor lightGrayColor] CGColor],
                        (id)[[UIColor whiteColor] CGColor]];
    [view.layer insertSublayer:gradient atIndex:0];
}

Or from one shade of gray, to another, and back:

- (void)addGradientToView:(UIView *)view
{
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = view.bounds;
    gradient.colors = @[(id)[[UIColor colorWithRed:0.8 green:0.8 blue:0.8 alpha:1.0] CGColor],
                        (id)[[UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1.0] CGColor],
                        (id)[[UIColor colorWithRed:0.8 green:0.8 blue:0.8 alpha:1.0] CGColor]];
    [view.layer insertSublayer:gradient atIndex:0];
}

Just change the colors in your array of colors to alter the gradient to achieve the desired effect. You may want to put the image view in a container view and apply the gradient to the container view, not the image view. Furthermore, presumably obvious, but this assumes that the images you are using in your UIImageView employ transparent backgrounds. If they don't, you'll have to alter them either (a) build the gradient right into the image; or (b) replace the background of the image with a transparency so the above CAGradientLayer effect can be seen.

Hi @Rob, with reference to your example above, I meddled with the codes and was able to achieved my desired results where I just want a subtle gradient at the top and/or bottom of my UIImageView. In the `.colors` array, I had a `(id)[[UIColor colorWithWhite:0 alpha:0.8] CGColor]` and a `(id)[[UIColor clearColor] CGColor]`. The clearColor allowed me to show the underlying image without having to deal with any transparency problems. And I find that I didn't have to `view.backgroundColor = [UIColor clearColor];` as well. I'll accept your answer if you could make the edits accordingly? — , Sep 02 '13 at 06:07
@Ryan Re the backgroundColor, you're right you don't need that (though allegedly it is useful if applying gradients to other UIKit controls, and it certainly doesn't hurt here). Regarding using clearColor in the gradient, that's only necessary if your gradient is over the image (which means the colors of the foreground will be slightly affected, too. You want the effect on the background only and if you need `clearColor` for it to work, then there's something wrong. I'd put the gradient on a container view on which the UIImageView is placed, not on the image view itself. But, whatever works. — Rob, Sep 02 '13 at 07:13
I'm actually trying to apply this gradient to the UIImageView itself and not bring other views into the picture in this case because all I need is an image that has a dark gradient at the bottom, so whatever color my image is, the text is still readable as seen in the example above. But thanks! — , Sep 02 '13 at 07:53

score 6 · Answer 2 · edited May 23 '17 at 10:31

6

nowadays this work properly applying right into UIImageView layer

// Set image over layer
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = imageView.frame;

// Add colors to layer
UIColor *centerColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.25];
UIColor *endColor = [UIColor grayColor];
gradient.colors = [NSArray arrayWithObjects:
                               (id)[endColor CGColor],
                               (id)[centerColor CGColor],
                               (id)[endColor CGColor],
                               nil];

[imageView.layer insertSublayer:gradient atIndex:0];

take it from here

edited May 23 '17 at 10:31

Community

1
1

answered Oct 09 '14 at 03:14

Vini Oliveira

365
5
9

1

Noticed that it should be: gradient.frame = imageView.bounds. – chinjazz Mar 03 '16 at 03:17
Can anyone translate this to Swift? – Rutger Huijsmans Aug 09 '16 at 04:37

Miralem Cebic · Answer 3 · 2017-04-21T07:48:47.420

1

SWIFT 3

    let gradient = CAGradientLayer()
    gradient.frame = imageView.bounds

    let startColor = UIColor(colorLiteralRed: 0, green: 0, blue: 0, alpha: 0.25)
    let endColor = UIColor.gray

    gradient.colors = [startColor.cgColor, endColor.cgColor]
    imageView.layer.insertSublayer(gradient, at: 0)

edited Apr 21 '17 at 07:48

answered Oct 14 '16 at 13:14

Miralem Cebic

1,276
1
15
28

this code didn't do anything on my imageView... any idea why? – Filipe Sá Apr 17 '17 at 00:33
.cgColor is missing on start and end color. CAGradientLayer only accepts CGColors and not UIColors – Filipe Sá Apr 17 '17 at 01:00

score 0 · Answer 4 · answered Sep 02 '13 at 02:53

I've done this effect in my applications before simply by overlaying a transparent image containing the darkened areas over the photo. Implementation wise, that generally means inserting another UIImageView above your photo's view in the view hierarchy.

score 0 · Answer 5 · answered Aug 09 '16 at 04:50

Translated to Swift:

var gradient = CAGradientLayer()
gradient.frame = imageView.bounds                    
let startColor = UIColor(colorLiteralRed: 0, green: 0, blue: 0, alpha: 0.25)
let endColor = UIColor.grayColor()
gradient.colors = [startColor, endColor]
imageView.layer.insertSublayer(gradient, atIndex: 0)

Gradient / shadows in UIImageView like Flipboard

5 Answers5