How to apply Blur Effects to images and views in iOS 8

In iOS 8 there’s a new class called UIVisualEffect with which you can apply blur effects to entire views. Reading the Class Reference however you’d never figure out how.

In a nutshell, we need to create a UIVisualEffect (either a UIBlurEffect or a UIVibrancyEffect) which is applied to a UIVisualEffectView. The latter needs the same size as the view we want to blur and is then added as a subview to the view we’d like to apply an effect to.

This sounds way more complicated than it really is. Imagine this: you have a UIView, any view will do. To it you add a subview (the UIVisualEffectView). The effect view is created with an effect.

So as soon as you apply the effect view, all other existing views below it are blurred. Anything above the effect view is not blurred. Remove the effect view and the blur goes away again.

Here’s an example:

// show image
self.imageView.image = [UIImage imageNamed:@"boat6"];

// create effect
UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

// add effect to an effect view
UIVisualEffectView *effectView = [[UIVisualEffectView alloc]initWithEffect:blur];
effectView.frame = self.view.frame;

// add the effect view to the image view
[self.imageView addSubview:effectView];

In this example we have a UIImageView which is referenced in the storyboard. To it we apply the desired effect.

The UIBlurEffect can be created with three options and no other parameters:

• UIBlurEffectStyleLight
• UIBlurEffectStyleExtraLight
• UIBlurEffectStyleDark

UIVibrancyEffect

There’s an additional (disappointing) UIVibrancyEffect which cannot be used on its own, only in conjunction with a blur effect. To use the vibrancy effect, we need to first create a blur, then a new vibrancy effect with that blur. From both effects we need to then create two separate effect views and add both of those to the view we’d like to blur.

Here’s an example:

// show image
self.imageView.image = [UIImage imageNamed:@"boat6"];

// create blur effect
UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

// create vibrancy effect
UIVibrancyEffect *vibrancy = [UIVibrancyEffect effectForBlurEffect:blur];

// add blur to an effect view
UIVisualEffectView *effectView = [[UIVisualEffectView alloc]initWithEffect:blur];
effectView.frame = self.view.frame;

// add vibrancy to yet another effect view
UIVisualEffectView *vibrantView = [[UIVisualEffectView alloc]initWithEffect:vibrancy];
vibrantView.frame = self.view.frame;

// add both effect views to the image view
[self.imageView addSubview:effectView];
[self.imageView addSubview:vibrantView];

I know… this seems an awful lot of trouble to get an effect which isn’t even all that good. But then, “new things” aren’t always “improvements” these days (the 2014 Mac Mini springs to mind).

How to do this in iOS 7

If you’re as disappointed by the results as I am, take a look at a UIImage Category with which Apple have demonstrated this effect at WWDC 2013. Look for a sample project called UIImageEffects.

The category is free to use and redistribute and allows for greater control over such things as colour tint and blur radius:

• WWDC 2013 Sample Code (login required)

Further Reading

• https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIVisualEffect_class/index.html#//apple_ref/occ/cl/UIVisualEffect
• https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIVisualEffectView/index.html#//apple_ref/occ/instm/UIVisualEffectView/initWithEffect:
• https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIVibrancyEffect/index.html#//apple_ref/occ/clm/UIVibrancyEffect/effectForBlurEffect:
• https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBlurEffect_Ref/index.html#//apple_ref/occ/cl/UIBlurEffect
• http://stackoverflow.com/questions/18942037/blur-screen-with-ios-7s-snapshot-api