Frosted Glass (iOS 7 Blur) Effect

Question

I am trying to apply a frosted glass effect in a UIImageView.

I tried to implement what I've found in this question, but the result wasn't acceptable. I wanted something like this:

Also, we can see that iOS 7 uses this kind of effect in a lot of places. How can we reproduce it?

Favoritism

Here's solution with UIToolbar: https://mcmap.net/q/125243/-how-can-i-produce-an-effect-similar-to-the-ios-7-blur-view – Factitious

I mentioned something similar in Edit 2 - it makes use of a UIToolbar also – Favoritism

Yes you are right. But this solution works on animating frame/bounds with UIView animation. – Factitious

Here's the fastest real-time view blur implementation (using accelerate framework): github.com/nicklockwood/FXBlurView !real time blur in ios simulator – Rebbecarebbecca

Answer 1

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

http://www.raywenderlich.com/5689/beginning-core-image-in-ios-5

UPDATE 1

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.

• The simple and short solution: https://github.com/esilverberg/ios-image-filters

• The amazing and this edit worth, library for processing images and videos with OpenGL, GPUImage by Brad Larson. It is much faster and efficient than Core Image. Introduction: http://www.sunsetlakesoftware.com/2012/02/12/introducing-gpuimage-framework. GitHub: GPUImage

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];

UPDATE 2

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.

UPDATE 3

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.

UPDATE 4

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):

Favoritism

You might also have to mix the Gaussian blur with a white color to get exactly the look you're going for above, and I was going to do a dedicated filter for this at some point. Also, I was going to experiment with textured frosted glass, like this shader provides: coding-experiments.blogspot.com/2010/06/frosted-glass.html – Campanology

And how could I do it? I feel that I don't have where to read docs =( Couldn't compile the docs also. – Favoritism

For custom filters, the best reference is to look at how the other filters work. For example, the above-linked textured glass would be accomplished by using a custom fragment shader, so you'd need to create a new custom filter (using something similar as a template) and modify the fragment shader they provide to work in OpenGL ES. For the brightened blur, you might be able to chain a brightness filter with the Gaussian blur, or at worst create a filter group with a custom fragment shader for the lightening step. The core documentation is in the Readme.md file. – Campanology

Ok, good. Not yet the perfect result but 90% there. Thanks for the replies, sent you a mail to contact at sunsetlakesoftware. – Favoritism

Using the toolbar's layer for the blur effect is very risky, if Apple changes the UIToolbar's view stack in some future point release, which is entirely possible, you'll be stuck with something very broken and will have to rush out a release. – Pillsbury

Answer 2

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.

Apteral

very useful answer, makes it easy to implement for ios 7 and 8, just a question, assuming i'm constantly adding and removing this blurred view, am i supposed to remove the constrains added every time i "remove the view from superview" (i use this code for adding it back again so i know constrains are constantly added) – Luna

Why not simply hide it instead of removing it? – Apteral

Excellent example. Works great. – Utmost

Great yar. Really thank you. Works perfect. But i want to change blur view color. It shows white blur. – Wehrmacht

This works great, except that UIBlurEffect doesn't work on older iPads, like the iPad2. Spent hours trying to figure out why it was only putting a translucent mask and not blurring - it was due to an old device! – Economically

Answer 3

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"]];

Devlin

Answer 4

Take a look at the Core Image Programming Guide. It seems like the stylize filter and the blur filter may suit your needs. I've never worked with Core Image before, but I think there may be some good WWDC sessions that involve them. The documentation has a basic piece of sample code here.

Carbineer

It looks that iOS doesn't have all the filters that OS X. You can check that by the code NSArray *properties = [CIFilter filterNamesInCategory:kCICategoryBuiltIn]; NSLog(@"%@", properties); – Favoritism

Without getting into details, have you run that code on iOS 6? – Carbineer