Using UIVisualEffectView to Apply Blur Effects in iOS

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).
visual effect in ios


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).
blur effect in ios
Hope you find this post useful.
Explore our blog


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.


USA408 365 4638


1301 Shoreway Road, Suite 160,

Belmont, CA 94002

Contact us

Whether you are a large enterprise looking to augment your teams with experts resources or an SME looking to scale your business or a startup looking to build something.
We are your digital growth partner.

Tel: +1 408 365 4638
Support: +1 (408) 512 1812