How to show realtime translucent background frost/blur effect similar to iOS UIToolbar

In our app "Monster Math - Best Arithmetic Game. Ever" we wanted to show a parental gate screen, when people click on the "Upgrade" or "Restore" button.  The parental gate screen should have a realtime translucent background frosted glass/blur effect, similar to how its shown in the UIToolbar.

So essentially what I wanted was something like this.

The actual view with a carousel, Upgrade and Restore buttons on it

The parental gate with a translucent background frost effect similar to iOS UIToolbar

I searched around, to see if I can find an inbuilt API in iOS that can help us do this.  But unfortunately there is nothing exposed by Apple that helps us do it.  That said, Apple did show a simple trick that can give us the desired effect very easily.

How do they do it!

This can be done in 3 simple steps

• Convert the underlying UIView to an UIImage
• Frost/Blur the UIImage
• Set this new frosted/blurred UIImage as background of your new view

NOTE: The explanation of how to do these steps can be found in this SO Answer.

Convert the underlining UIView to an UIImage

This can be done by creating a new category of UIView and adding the following method to that category

Frost/Blur the UIImage

To frost/blur the UIImage that we created in the previous step we can use the Apples Image Effect category.  The code for ImageEffects category looks as follows

Using this ImageEffects category we can frost/blur any UIImage as follows

Set this new frosted/blurred UIImage as background of your new view

This is by far the simplest step of all.  All that needs to be done here is to set the newly created UIImage as the background of your new view.  Our game is developed with Cocos2d and we could do this using the following lines of code

The end result is very satisfying.  It looks great on the devices as well!

Thats all folks! I hope you like this realtime frosted glass/blurred effect as much as I do.