Background blur Effect?

Question

I want to copy the blur effect in the red box:

You see that the photo is somehow in the background of this rectangle. I found this effect in apps like Eye'em and Spotify.

How can I make such a blur effect?

Answer 1

The example bellow create a view with blur effect in the top part of the screen, basically you create a view (or use an existent one), create a blur effect, resize the effect to fit the view and add the new view with the effect to the first view.

var myViewToBlur = UIView(frame: CGRectMake(0, 0, self.view.frame.width, 100))
let blurView = UIVisualEffectView(effect:UIBlurEffect(style: UIBlurEffectStyle.Light))
blurView.frame = myViewToBur.bounds
myViewToBur.addSubview(blurView)

Answer 2

Here is a great article that is covering several options for this effect.

http://code.tutsplus.com/tutorials/adding-blur-effects-on-ios--cms-21488

It covers 3 techniques:

• blurring with the Core Image framework
• blurring using Brad Larson's GPUImage framework
• blurring using Apple's UIImage+ImageEffects category

You can even get some working code here: https://github.com/iGriever/TWSReleaseNotesView

BR, ValR.