Creating Frosted Glass effect using Swift – ios 7/ios 8 – Xcode 6

In this tutorial we will modify a UIViewController to behave like a semi transparent Frosted Blur Glass. It will open like an overlay above our Main ViewController and you should be able to control the amount of blur through code.

As you can see the screenshot below. We have 2 UIViewControllers and we can click the Add button on our FirstViewController to open the SecondViewController as an overlay with frost glass effect.



There are various ways by which this can be achieved.

The process by which i have achieved this is as follows:

1) First take a snapshot of the First View Controller once loaded.

2) Add Gaussian blur to the snapshot

3) Pass this snapshot to the Second View Controller

4) Use it as a background image for the Second View

There are other ways by which also this can be achieved which i will post in future but this is the simplest way to do it.



Setup the story board. Screenshot below to explain the configuration.







Step 2:

In the first view controller we will have to take the snapshot and then pass it to second view controller.

Apple has provided some nice API to take the snapshot. We will be using these APIs.

As we are going to pass the image from our first view to the 2nd view we will need to use prepareForSegue function to pass the values. Lets override this method in our first view controller and write our code to take the snapshot. The code snipped looks like this.



    Let me explain what each part do.


The above code is used to access the destination View controller. The data will be passed to it.


In the above code we take a screen shot of the first view and change it to UIImage.


Here we have created a CIFilter and applied CIGaussianBlur on the image which we have taken screenshot.

Note that you can modify the

value to set the amount of blur.

Finally we set the blur image to our second view controller as follows


Step 3:

In the second view controller we will use this image as background.

If you want to play around with the brightness or glare of the background blur you can try adding


where the value can be between 0.0 to 1.

Update: 20th June 2015:

I got some comments around the screen turns black on device but works fine on simulator. Try this code to replace the part where we are taking the screenshot.


Source Code: Download