UIVisualEffectView Tutorial: Getting Started

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.

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:

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:

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:

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:

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

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:

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.

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