How To Have Blurry Background For Buttons Swift

Update notation: Ron Kliffer updated this tutorial for Xcode 12, Swift 5 and iOS xiv. Ryan Nystrom wrote the original.

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

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

Notification Centre uses the mistiness effect as well, but rather than blurring the unabridged groundwork, each Notification Middle extension or notification has its own blurred background. In add-on to looking cute, this blur helps each chemical element stand out but the right amount.

iOS examples for using blur

So how practice y'all recreate these types of blurs in your own apps? Utilize the built-in UIVisualEffectView! In this tutorial, you lot'll learn everything you demand to know to make your apps stand out using blurs, including:

How blurs work
Strategies for designing blurs
How to utilize UIVisualEffectView

Read on to go started!

Getting Started

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

To learn how to use blurring, y'all'll add together blur furnishings 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 brandish font, the text alignment and fifty-fifty the color theme.

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

Sample project Storyboard

Yous tin ignore the starting time view controller in the prototype in a higher place, as it'due south just the root navigation controller of the app, which has StoryListViewController equally information technology's root view controller. Taking each numbered view controller in plow, you'll run across the following:

The starting time view controller is StoryListViewController, which displays a list of all the fairy tales in the database.
Tapping a story in the list segues the user to StoryViewController, which displays the title and text of the selected fairy tale.
OptionsViewController is contained within StoryViewController and displays the bachelor 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 every bit shown below:

Grimm starter app

Have some fun exploring the app. Select dissimilar 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 empathize more nigh blurs. The side by side sections will cover how blurs piece of work and hash out blueprint guidelines for them.

How Blurs Work

All blurs offset with an epitome. To reach a blur, apply a blurring algorithm to each pixel in the epitome. The resulting image will contain an evenly blurred version of the original paradigm. Blurring algorithms vary in style and complexity; in this department, you lot'll learn almost a common algorithm known every bit a Gaussian blur.

Blurring algorithms more often than not examine each pixel of an epitome and utilize the surrounding pixels to calculate a new colour value for that pixel. For example, consider the following theoretical image grid:

blur example grid

Each jail 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 heart pixel. The algorithm averages the values of the surrounding pixels and inserts this averaged value into the middle 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 case 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 mistiness applied to an image

Note: By and large, the greater the blur radius, the greater the processing power required to process the image. iOS offloads nigh image processing activities to the GPU to go on the chief thread free.

You now know a bit near how blurs work, simply what most their design? The side by side section volition embrace some guidelines on how and when to use them.

Mistiness Blueprint Strategies

Humans take a tendency to pay attending to elements that are in focus and ignore those that aren't. Believe it or not, this is a natural issue of how our eyes work. Focusing on an object equally it moves closer or further abroad from the eye is known as accommodation. This is what helps you perceive the depth and distance of objects effectually you.

App designers exploit this fact and blur unimportant items on the screen to direct the user's attention to the remaining not-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, simply barely. This provides contextual awareness to the user about where they are in the navigational hierarchy. For instance, you'd await to return to the blurred-out view in the groundwork once you dismiss the card displayed.

Note: Be careful about the overuse of blurs in your mobile apps. Although blurs can provide neat-looking furnishings, they tin can be distracting and abrasive if used inappropriately or besides oftentimes.

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

With that out of the fashion, information technology's time to start applying mistiness furnishings.

Blur Effects Using UIVisualEffectView

UIKit provides an entire suite of visual effects goodies. UIBlurEffect, a subclass of UIVisualEffect, is peculiarly relevant, as information technology provides the nice blurs you come across in navigation bars, Notification Center and Control Center — and you lot tin can employ it in your apps as well.

Calculation a UIBlurEffect

In this projection, y'all'll use blur to brand OptionsViewController stand out on top of the story.

Open OptionsViewController.swift and add the following code to the finish of viewDidLoad():

// 1 view.backgroundColor = .clear // two let blurEffect = UIBlurEffect(way: .light) // three let blurView = UIVisualEffectView(effect: blurEffect) // iv blurView.translatesAutoresizingMaskIntoConstraints = false view.insertSubview(blurView, at: 0)

Hither'south what y'all're doing in the code to a higher place:

In order for UIVisualEffectView to really blur the content, its superview must be transparent. To get in transparent, modify the background color of view to clear.
Create a UIBlurEffect with a UIBlurEffect.Way.lite manner. This defines the blur style. In that location are many different styles; bank check the documentation to see the full list.
Create a UIVisualEffectView with the blur you just created. This class is a subclass of UIView. Its sole purpose is to define and display complex visual furnishings.
Disable translating the auto-resizing masks into constraints on blurView — you'll manually add constraints in a moment — and add information technology at the bottom of the view stack. If you added blurView on top of the view, it would blur all the controls underneath information technology instead!

At present yous need to ensure blurView is laid out properly with the remainder of the view.

Add the following code to the cease of viewDidLoad:

NSLayoutConstraint.activate([   blurView.topAnchor.constraint(equalTo: view.topAnchor),   blurView.leadingAnchor.constraint(equalTo: view.leadingAnchor),   blurView.heightAnchor.constraint(equalTo: view.heightAnchor),   blurView.widthAnchor.constraint(equalTo: view.widthAnchor) ])

These constraints keep the frame of blurView consistent with that of OptionsViewController.

Build and run. Select a fairy tale, tap the settings button and then curl the text. Y'all'll see the blur update in real time.

Grimm with blur

Toggle the Reading Mode and notice how the blurred groundwork changes:

Grimm with blur

Yous now have a dynamic blur effect in your app that was not only easy to implement, but looks great too.

Calculation Vibrancy to Your Blur

Mistiness effects are corking‚ simply as usual, Apple has taken information technology to the next level with UIVibrancyEffect. Vibrancy, when used in combination with UIVisualEffectView, adjusts the colors of the content to make it feel more than vivid.

The following epitome shows how vibrancy makes your labels and icons pop off the screen, while at the same time blending with the background itself:

Example of vibrancy effect

The left side of the image above shows a normal label and push, while the right side shows a characterization and button with vibrancy applied.

Note: Yous must add together UIVibrancyEffect to the contentView of a UIVisualEffectView that has been set up and configured with a UIBlurEffect object. Otherwise, there won't be whatever blurs to apply a vibrancy effect to!

Open OptionsViewController.swift and add the post-obit lawmaking to the cease of viewDidLoad():

// 1 let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect) // ii let vibrancyView = UIVisualEffectView(upshot: vibrancyEffect) vibrancyView.translatesAutoresizingMaskIntoConstraints = fake // three vibrancyView.contentView.addSubview(optionsView) // iv blurView.contentView.addSubview(vibrancyView)

In the code in a higher place, you:

Create a UIVibrancyEffect that uses the blurEffect yous fix earlier. UIVibrancyEffect is some other subclass of UIVisualEffect.
Create a UIVisualEffectView to contain the vibrancy effect. This process is exactly the aforementioned equally creating a mistiness. Since you're using Automobile Layout, you make certain to disable car-resizing translations here.
Add optionsView as a subview of your vibrancy view's contentView. This ensures the vibrancy effect is applied to the view that contains all the controls.
Add the vibrancy view to the blur view's contentView to complete the effect.

Adjacent you demand to fix up the Auto Layout constraints for the vibrancy view so that information technology has the same dimensions as the blur view. Then be certain to center the options view in the vibrancy view.

Add together the following constraints at the end of viewDidLoad():

NSLayoutConstraint.actuate([   vibrancyView     .heightAnchor     .constraint(equalTo: blurView.contentView.heightAnchor),   vibrancyView     .widthAnchor     .constraint(equalTo: blurView.contentView.widthAnchor),   vibrancyView     .centerXAnchor     .constraint(equalTo: blurView.contentView.centerXAnchor),   vibrancyView     .centerYAnchor     .constraint(equalTo: blurView.contentView.centerYAnchor) ])  NSLayoutConstraint.activate([   optionsView     .centerXAnchor     .constraint(equalTo: vibrancyView.contentView.centerXAnchor),   optionsView     .centerYAnchor     .constraint(equalTo: vibrancyView.contentView.centerYAnchor) ])

Build and run. Navigate to the options view to see your new vibrancy issue in activity:

Grimm with blur & vibrancy

Unless you have high-dissimilarity vision, the vibrancy consequence makes it difficult to read the labels and controls. What'due south going on?

Ah — the content backside the blur view is low-cal and yous're applying a UIBlurEffect.Style.light effect. That's counterproductive, to be sure.

Change the line near the summit of viewDidLoad() that initializes blurEffect:

let blurEffect = UIBlurEffect(style: .night)

The alter from a light manner to a dark style adds more contrast between the background and text.

Build and run. You're at present experiencing some true vibrancy:

Grimm with blur & vibrancy

Accessibility

However, when information technology comes to blurs, there's one last thing you need to consider: What if the user has blurs disabled?

In the simulator or on your device, open the Settings app and go to Accessibility ▸ Brandish & Text Size, and enable Reduce Transparency. Go back to the app and open the options view once again.

Grimm with reduced transparency

Well, that's a bit nighttime. Going back to what yous started out with is a improve culling.

Fortunately, y'all can check if this accessibility setting is enabled using UIAccessibility.isReduceTransparencyEnabled. If you know that this setting is on, you can change the manner your app looks and behaves.

Add the following right before yous set the view's background color in viewDidLoad():

guard !UIAccessibility.isReduceTransparencyEnabled else {   return }

This code checks to meet if Reduce Transparency is on. If it is, ignore all the code you just wrote and go back to the original layout without any blurring.

Build and run, and you'll come across that the options menu'due south background is no longer blurred:

Grimm without blur

Where to Become From Here?

Download the completed version of the project by clicking the Download Materials button at the top or lesser of this tutorial.

Yous've seen how to blur images, as well as how to create real-fourth dimension mistiness furnishings using UIVisualEffectView. You can just as easily add avant-garde blur furnishings to your own app! In that location are many more effects and options you could dive in to, and the all-time place to continue your exploration would exist in Apple's official UIVisualEffectView documentation.

UIVisualEffectViewsouth update in real time, so you tin achieve all sorts of weird and wonderful things with these furnishings. While it's tempting to get ahead and blur all the things, remember the tips from earlier in the tutorial regarding using these effects sparingly and only where appropriate. As is ofttimes the example, with blur and vibrancy, less is definitely more.

If you have any questions or comments about this UIVisualEffectView tutorial or visual furnishings in general, please join the forum discussion below!