CODEWITHSUNDEEP
iosuiimageviewuiimage
snksnk
snksnk

Reputation: 1595

Apply a blur gradient

I need to mask an image with a blur gradient.

In more detail; I want the picture to start on the left with no blur at all and on its right to be blurred. The blurring will start to occur somewhere half way. I already managed to blur the image in full but as a separate image, but how do I apply a semi-transparent gradient of that blurring?

UIImageView *bluredImgView = [[UIImageView alloc] initWithImage:img];
bluredImgView.frame = frame;
CAGradientLayer *lay = [CAGradientLayer layer];
lay.frame = bluredImgView.bounds;
lay.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithWhite: 0.0 alpha: 0.0] CGColor], (id)[[UIColor colorWithWhite: 1.0 alpha: 1.0] CGColor], nil];
lay.startPoint = CGPointMake(0.0f, 0.0f);
lay.endPoint = CGPointMake(1.0f, 0.0f);
bluredImgView.layer.mask = lay;
[_profileImageView addSubview:bluredImgView];

Upvotes: 5

Views: 8081

Answers (3)

Elio_
Elio_

Reputation: 429

This question is rather old but still.. None of the previous answers combined the blur effect to a gradient.

This adds the effect from bottom to top (looks cool for title images): 

titleImage.image = [UIImage imageNamed: titleImage];


UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *view = [[UIVisualEffectView alloc] initWithEffect:effect];
view.frame = titleImage.frame;

UIImageView *bluredImgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:_location.titleImage]];
bluredImgView.frame = _titleImage.frame;
CAGradientLayer *lay = [CAGradientLayer layer];
lay.frame = bluredImgView.bounds;
lay.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithWhite: 0.0 alpha: 0.0] CGColor], (id)[[UIColor colorWithWhite: 0.0 alpha: 1.0] CGColor], nil];
lay.startPoint = CGPointMake(0.0f, 0.0f);
lay.endPoint = CGPointMake(0.0f, 1.0f);
view.layer.mask = lay;
[titleImage addSubview:view];

Upvotes: 5

Andrew Wang
Andrew Wang

Reputation: 81

Use code below:

NSArray *colors = [NSArray arrayWithObjects:(__bridge id)[[UIColor colorWithWhite:0 alpha:0] CGColor], (__bridge id)[[UIColor colorWithWhite:0 alpha:1] CGColor], nil];

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
[gradientLayer setFrame:[bluredImgView bounds]];
[gradientLayer setColors:colors];
[gradientLayer setStartPoint:CGPointMake(0.0f, 0.0f)];
[gradientLayer setEndPoint:CGPointMake(1.0f, 0.0f)];

bluredImgView.layer.mask = gradientLayer;

Upvotes: 2

Duncan C
Duncan C

Reputation: 131511

Add the blurred image as a separate layer on top of your image view's layer. Then create a CAGradientLayer and add it as a mask layer on your blurred image layer.

Upvotes: 4

Related Questions