Contact

How to Apply Blur Effects in iOS

4 minutes to read

Apply a blur effect in iOS using UIBlurEffect with UIVisualEffectView.

How UIBlurEffect and UIVisualEffectView Work

UIBlurEffect is a concrete subclass of UIVisualEffect. It creates a Gaussian blur that obscures content behind the view. UIVisualEffectView renders the blur effect on screen. The blur affects everything layered behind the visual effect view in the view hierarchy.

UIBlurEffect provides three built-in styles: .extraLight, .light, and .dark. iOS 13 introduced adaptive material styles including .systemThinMaterial, .systemUltraThinMaterial, and .systemChromeMaterial. Material styles automatically adapt to light and dark mode.

Applying a Blur Effect Programmatically

Create a UIBlurEffect instance and initialize a UIVisualEffectView with it:

let blurEffect = UIBlurEffect(style: .light)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = view.bounds
backgroundImageView.addSubview(blurView)

The blur effect view must be a subview of the view you want to blur. Adding it as a sibling or ancestor produces no visible effect. The blur renders content behind the visual effect view, not content inside it.

Use .dark style for darker backgrounds and .light for brighter ones. Test with various background images to ensure readability of foreground content.

Building a Login Screen with Blurred Background

Start with a full-screen UIImageView behind all other views. Pin it to all four edges using Auto Layout constraints with the Second Item set to Superview, not Safe Area.

Pick a random background image and apply the blur in viewDidLoad:

private let imageNames = ["cloud", "coffee", "food", "pmq", "temple"]
private var blurEffectView: UIVisualEffectView?

override func viewDidLoad() {
    super.viewDidLoad()
    let randomIndex = Int.random(in: 0..<imageNames.count)
    backgroundImageView.image = UIImage(named: imageNames[randomIndex])

    let blurEffect = UIBlurEffect(style: .light)
    blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView?.frame = view.bounds
    backgroundImageView.addSubview(blurEffectView!)
}

Handling Orientation and Layout Changes

Update the blur view's frame when the parent view's bounds change. Override viewDidLayoutSubviews for reliable layout updates:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    blurEffectView?.frame = view.bounds
}

Without frame updates, the blur view stays at its original size after rotation or split view changes. This leaves unblurred areas exposed.

Fixing Safe Area Constraint Issues

On iPhone X and later, background image views constrained to Safe Area show gray bars in landscape. Fix this by changing constraint Second Items from Safe Area to Superview. Open each constraint in the Attributes inspector and update the Second Item dropdown.

Using UIVibrancyEffect for Foreground Content

UIVibrancyEffect adjusts the color and sharpness of content inside a UIVisualEffectView. Labels and controls inside a vibrancy view appear brighter and more readable against the blurred background.

let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
let vibrancyView = UIVisualEffectView(effect: vibrancyEffect)
blurEffectView?.contentView.addSubview(vibrancyView)

Add labels and buttons to the vibrancy view's contentView, not directly to the blur view. Vibrancy only affects direct subviews of the vibrancy view's content view.

Using Adaptive Material Styles

iOS 13 introduced UIBlurEffect.Style variants that adapt to light and dark mode. Use .systemUltraThinMaterial for subtle blurs, .systemThinMaterial for standard blur, and .systemMaterial for prominent blur.

let blurEffect = UIBlurEffect(style: .systemMaterial)

Adaptive materials automatically switch between light and dark appearances. This eliminates the need to manually manage blur styles for different interface modes.

Practical Use Cases for Blur Effects

Login and authentication screens benefit from blurred backgrounds. The blur adds visual interest without distracting from the login form.

Modal dialogs and popovers use blur to maintain context. Users see content underneath, but the blur signals that the foreground view requires attention.

Image galleries and media browsers apply blur to backgrounds while displaying full-screen media. The blurred version of the current image creates an immersive experience.

Control Center-style overlays use blur for control panels and notification banners. Mimicking system design language makes custom overlays feel native.

Best Practices for Blur Effects

Blur effects consume GPU resources. Apply them sparingly, especially on older devices. Avoid stacking multiple blur views. Each additional blur layer compounds the rendering cost.

Match blur style to content. Light blurs work over bright backgrounds. Dark blurs suit darker themes. Test with multiple background images to ensure foreground readability.

Update blur view frames on every layout change. Use viewDidLayoutSubviews for consistent updates across orientation changes, split view, and safe area insets.

Use vibrancy for text and controls inside blur views. Vibrancy improves readability significantly compared to standard labels on blurred backgrounds.

Troubleshooting Common Issues

Blur not appearing. Verify the UIVisualEffectView is added as a subview of the view you want to blur. The blur affects content behind the visual effect view.

Gray bars on device edges. Background image constraints reference Safe Area instead of Superview. Update constraint Second Items to Superview.

Blur not updating after rotation. Override viewDidLayoutSubviews to update the blur view's frame on every layout pass.

Performance lag on older devices. Reduce the number of blur views. Cache a blurred image as a static UIImage if the background content never changes.

Summary

This tutorial covered the complete implementation process from setup to working code. You now have a functional implementation that you can extend and customize for your own projects. The same patterns apply to related features in the iOS ecosystem.

Frequently Asked Questions

What is UIBlurEffect? UIBlurEffect is a UIKit class that describes a blur style. You pass it to a UIVisualEffectView, which renders the blur over the content behind it. Both are part of iOS.

What iOS version is required? This tutorial targets iOS 13. Most of the APIs shown work on earlier versions as well, but some newer APIs may require the version specified in the article.

What are the prerequisites for this tutorial? You need Xcode installed on a Mac and basic familiarity with Swift programming. No prior experience with the specific framework is required.

All articles