Frosted Glass (iOS 7 Blur) Effect Frosted Glass (iOS 7 Blur) Effect ios ios

Frosted Glass (iOS 7 Blur) Effect

A good tutorial about CoreImage is here, showing how to apply filters and more:


So after a little bit of research, I ended up discovering that the Core Image for the iOS is still incomplete, when comparing to the OS X version of the library. So I googled a lot, and I find two solutions, one of them more simple, and the other much wider and complex library.

So, for example, in a few lines I can get the result I want (where originalImage is the UIImage to apply the effect):

GPUImageGaussianBlurFilter *blurFilter = [[GPUImageGaussianBlurFilter alloc] init];blurFilter.blurSize = 2;UIImage *blurImage = [blurFilter imageByFilteringImage:resizedImage];


After Apple announced iOS 7, some developers found a workaround to do the same that Apple did in the default iOS apps, as Apple didn't provide an API for that. The simplest and better solution, in my opinion, is this one. Why I think it's the best? Because even if some view behind it moves, the blur still works great with the updated effect, as we expect it should work. However, bear in mind that it depends on the iOS 7 SDK in order to work, and it can be risky if Apple changes UIToolbar.


Apple mentioned, at WWDC 2013 (Session 226 - Implementing Engaging UI on iOS) they would provide a category class on UIImage, called UIImage+ImageEffects (I googled it, and found here, but it's available in Developer Portal - search for UIImageEffects in the search box). With this category, you can apply the blur in a static UIImage, using several methods (light, dark, with a specific color, etc.). Also, yesterday I saw this component and found it pretty interesting, as you can apply the effect (based on the above mentioned category) in a frame.


Finally, on iOS 8, Apple released new classes that can do live blur easily. With UIVisualEffect and UIVisualEffectView, you can quickly add live blur to your apps. Here is a good tutorial from Ryan Nystrom on how to use those classes (and in blur in general):

Solution for iOS 7 and 8, without using CoreImage or CoreGraphics at all:

- (void)addBlurToView:(UIView *)view {    UIView *blurView = nil;     if([UIBlurEffect class]) { // iOS 8        UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];        blurView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];        blurView.frame = view.frame;    } else { // workaround for iOS 7        blurView = [[UIToolbar alloc] initWithFrame:view.bounds];    }    [blurView setTranslatesAutoresizingMaskIntoConstraints:NO];    [view addSubview:blurView];    [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[blurView]|" options:0 metrics:0 views:NSDictionaryOfVariableBindings(blurView)]];    [view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[blurView]|" options:0 metrics:0 views:NSDictionaryOfVariableBindings(blurView)]];}

(assuming you're not targeting versions older than iOS 7; if you are, you'll have to test for the iOS version in the else block)

This solution applies to any view, not only images.

Using UIImageEffects

If you want more control when applying blur, you could make use of Apple's UIImageEffects (available through their sample code).

You can copy the code for UIImageEffects from Apple's Developer Library : Blurring and Tinting an Image

And here's how to use it :

#import "UIImageEffects.h"...self.yourImageView.image = [UIImageEffects imageByApplyingLightEffectToImage:[UIImage imageNamed:@"yourImage.png"]];