Using UIVisualEffectView to Apply Blur Effects in iOS

Hey Guys,

In this post I’m going to show you to how to apply blur effects in your iOS app using the UIVisualEffectView class. The UIVisualEffectView class was first introduced in iOS 8. It’s a very useful class that can be used to apply blur and vibrancy effects just like in a native iOS app.

In order to create a blur effect or to add vibrancy in your view, you need to create a Visual Effect View first. By default, iOS provides two separate classes named for this purpose, the Visual Effect View with Blur class and the Visual Effect Views with Blur and Vibrancy class. If you just need to add a blur effect in any specific view, just add that view under Visual Effect with the blur class and that blur effect will be applied to it. If your view includes text and you don’t want to apply blur effects on that, then you should use the Visual Effect Views with Blur and Vibrancy class.

In this article, I’ll show you how to use and configure the Visual Effect View with Blur.

Visual Effect With Blur

For better illustration of how blur affects an image, we’ll first add a background image and name it ‘blur-effect’ (as depicted below).

Next, we’ll add the Visual Effect with blur class below the image on which we want to add the blur effect. To ensure that the blur effect is applied on the whole image, add the equal height and equal width constraint between the background image, which in our case is ‘blur-effect’ and the visual effect view (as shown below).

When do you that’ll you’ll see the following output:

In case you want to add another picture over the blur effect, there is a default UIView provided for that purpose by the Visual Effect view. Any sub-view added under that will not have the blur effect over it.

By default, you can apply has three different styles of blur effects using this class, which you can use as per your need. These are Extra Light, Light, and Dark (as depicted below).

Hope you find this post useful.
Explore our blog

ABOUT FOLIO3

As a leading mobile app development company (iPhone, Android, Windows Phone, HTML5 app development), Folio3 specializes in native app development services and cross platform mobile app development services for the iPhone and iPad. We also offer extensive mobile app testing and QA services. If you have a mobile app idea that you’d like to discuss please or would like to know more about our iPhone app development services, please Contact Us. Learn more about our iPhone, Android and Windows Phone app development services.

Blog Post