UIVisualEffectView Tutorial: Getting Started

In this UIVisualEffectView tutorial, you’ll learn how blurs work on a technical level and how to add native blur and vibrancy effects to your own apps. By Ron Kliffer.

5 (7) · 1 Review

Download materials
Save for later
Share
Update note: Ron Kliffer updated this tutorial for Xcode 12, Swift 5 and iOS 14. Ryan Nystrom wrote the original.

Ever since the design of iOS dramatically changed in iOS 7, blurs have played an important role in app design. When used appropriately, blurs can significantly improve the usability and appearance of your apps.

Apple uses blurs at the system level to great effect. Two notable examples are the Control Center and the new iOS 14 Widget Center. The blurred background used in these preserves the context of an action — Control Center and Widget Center aren’t their own apps, rather they’re panels shown above the active app.

Notification Center uses the blur effect as well, but rather than blurring the entire background, each Notification Center extension or notification has its own blurred background. In addition to looking beautiful, this blur helps each element stand out just the right amount.

iOS examples for using blur

So how do you recreate these types of blurs in your own apps? Use the built-in UIVisualEffectView! In this tutorial, you’ll learn everything you need to know to make your apps stand out using blurs, including:

  • How blurs work
  • Strategies for designing blurs
  • How to use UIVisualEffectView

Read on to get started!

Getting Started

Download the starter project by clicking the Download Materials button at the top or bottom of the tutorial.

To learn how to use blurring, you’ll add blur effects to a brand-new Brothers Grimm fairy-tale app — aptly named Grimm.

The app displays a library of fairy tales. When a user taps a fairy tale, the app presents the full story. The user can customize the display font, the text alignment and even the color theme.

Open Grimm.xcodeproj in Xcode. Open Main.storyboard and take a look at the view controllers contained in the app as illustrated below:

Sample project Storyboard

You can ignore the first view controller in the image above, as it’s simply the root navigation controller of the app, which has StoryListViewController as it’s root view controller. Taking each numbered view controller in turn, you’ll see the following:

  1. The first view controller is StoryListViewController, which displays a list of all the fairy tales in the database.
  2. Tapping a story in the list segues the user to StoryViewController, which displays the title and text of the selected fairy tale.
  3. OptionsViewController is contained within StoryViewController and displays the available font, text alignment and color options. To display it, tap the top-right settings icon in the navigation bar.

Build and run. You’ll see the initial screen as shown below:

Grimm starter app

Have some fun exploring the app. Select different stories, tap the settings icon and swipe to different fonts and reading modes to understand how the user interface functions.

Now, before moving on, it’s important to understand more about blurs. The next sections will cover how blurs work and discuss design guidelines for them.

How Blurs Work

All blurs start with an image. To achieve a blur, apply a blurring algorithm to each pixel in the image. The resulting image will contain an evenly blurred version of the original image. Blurring algorithms vary in style and complexity; in this section, you’ll learn about a common algorithm known as a Gaussian blur.

Blurring algorithms generally examine each pixel of an image and use the surrounding pixels to calculate a new color value for that pixel. For example, consider the following theoretical image grid:

blur example grid

Each cell in the grid above represents an individual pixel, and each pixel has a value between 1 and 10. Consider the case where the algorithm is evaluating the center pixel. The algorithm averages the values of the surrounding pixels and inserts this averaged value into the center pixel, resulting in the following new pixel grid:

blur example grid averaged

The algorithm repeats this process for every pixel in the original image.

The example above only looks at one pixel in each direction to create the new averaged value. But expanding the blur radius increases the amount of blurring in the image, as depicted in the image below:

3px and 16px Gaussian blur applied to an image

3px and 16px Gaussian Blur applied to an image

3px and 16px Gaussian blur applied to an image

Note: Generally, the greater the blur radius, the greater the processing power required to process the image. iOS offloads most image processing activities to the GPU to keep the main thread free.

You now know a bit about how blurs work, but what about their design? The next section will cover some guidelines on how and when to use them.

Blur Design Strategies

Humans have a tendency to pay attention to elements that are in focus and ignore those that aren’t. Believe it or not, this is a natural consequence of how our eyes work. Focusing on an object as it moves closer or further away from the eye is known as accommodation. This is what helps you perceive the depth and distance of objects around you.

App designers exploit this fact and blur unimportant items on the screen to direct the user’s attention to the remaining non-blurred elements, as demonstrated in this screenshot of the iOS native Photos app:

Photos usage of UIVisualEffectView

The user interface in the background is recognizable in the image above, but barely. This provides contextual awareness to the user about where they are in the navigational hierarchy. For instance, you’d expect to return to the blurred-out view in the background once you dismiss the menu displayed.

Follow the standard design approach to use blurs to direct a user’s attention to things that matter and you’ll seldom go wrong. See the Materials section of the iOS Human Interface Guidelines document for more on this subject.

Note: Be careful about the overuse of blurs in your mobile apps. Although blurs can provide great-looking effects, they can be distracting and annoying if used inappropriately or too often.

Follow the standard design approach to use blurs to direct a user’s attention to things that matter and you’ll seldom go wrong. See the Materials section of the iOS Human Interface Guidelines document for more on this subject.

With that out of the way, it’s time to start applying blur effects.