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

This slideshow requires JavaScript.

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:

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



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:

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:


Further Reading

About Jay Versluis

Jay is a medical miracle known as Super Survivor. He runs two YouTube channels, five websites and several podcast feeds. To see what else he's up to, and to support him on his mission to make the world a better place, check out his Patreon Campaign.

2 thoughts on “How to apply Blur Effects to images and views in iOS 8

  1. You made a small mistake –
    UIVisualEffectView *vibrantView = [[UIVisualEffectView alloc]initWithEffect:vibrancy];
    effectView.frame = self.view.frame;

    This should be
    vibrantView.frame = self.view.frame

Leave a Reply to Gautam Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.