Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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];
like image 479
snksnk Avatar asked Jan 25 '14 18:01

snksnk


People also ask

How do you add a blur effect in Photoshop?

In Photoshop, go to Filter > Blur Gallery and select Iris Blur. Click the pin at the centre of the ring and place it on your focal point. Click and drag single points to elongate the ellipsis or drag the outer line to resize the blur area.


3 Answers

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.

like image 106
Duncan C Avatar answered Sep 22 '22 18:09

Duncan C


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];
like image 37
Elio_ Avatar answered Sep 23 '22 18:09

Elio_


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;
like image 38
Andrew Wang Avatar answered Sep 22 '22 18:09

Andrew Wang