Introduction

UIVisualEffectView is the standard UIKit tool for adding live blur and vibrancy effects. When you want to blur an image that is already visible in the interface, the usual pattern is to place the image in a UIImageView and overlay it with a blur effect view. The important distinction is that UIVisualEffectView blurs what is behind it on screen; it does not permanently alter the underlying image data.

Build the Basic View Hierarchy

The simplest setup is an image view with a blur view on top:

1import UIKit
2
3final class BlurViewController: UIViewController {
4    private let imageView = UIImageView()
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8
9        view.backgroundColor = .systemBackground
10
11        imageView.image = UIImage(named: "hero")
12        imageView.contentMode = .scaleAspectFill
13        imageView.clipsToBounds = true
14        imageView.frame = view.bounds
15        imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
16        view.addSubview(imageView)
17
18        let blur = UIBlurEffect(style: .systemMaterial)
19        let blurView = UIVisualEffectView(effect: blur)
20        blurView.frame = imageView.bounds
21        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
22        imageView.addSubview(blurView)
23    }
24}

This is the standard answer for "blur the image" in UIKit. You are not editing pixels. You are adding an effect layer above the image.

Choose the Right Blur Style

The blur style affects readability and visual weight. Older styles such as .light and .dark still exist, but modern system materials usually integrate better with current iOS design.

Examples:

• '.systemUltraThinMaterial'
• '.systemMaterial'
• '.systemChromeMaterial'

If the blurred image is just decorative, lighter material styles are often enough. If text or buttons sit on top of the blur, use a style that preserves contrast more reliably.

Try styles in the actual screen context instead of assuming one blur fits every UI.

Add Content Above the Blur

One advantage of UIVisualEffectView is its contentView, which is meant for controls layered above the effect.

1let blur = UIBlurEffect(style: .systemMaterial)
2let blurView = UIVisualEffectView(effect: blur)
3blurView.frame = imageView.bounds
4blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
5
6let titleLabel = UILabel()
7titleLabel.text = "Featured"
8titleLabel.textColor = .white
9titleLabel.font = .boldSystemFont(ofSize: 28)
10titleLabel.translatesAutoresizingMaskIntoConstraints = false
11
12blurView.contentView.addSubview(titleLabel)
13
14NSLayoutConstraint.activate([
15    titleLabel.centerXAnchor.constraint(equalTo: blurView.contentView.centerXAnchor),
16    titleLabel.centerYAnchor.constraint(equalTo: blurView.contentView.centerYAnchor)
17])
18
19imageView.addSubview(blurView)

Use contentView instead of adding controls behind or outside the blur view when the goal is "blurred background with readable foreground content."

Blur Part of the Image, Not All of It

You do not have to blur the entire image. A common pattern is blurring only a footer, header, or card overlay area.

1let blur = UIBlurEffect(style: .systemThinMaterialDark)
2let footerBlur = UIVisualEffectView(effect: blur)
3footerBlur.translatesAutoresizingMaskIntoConstraints = false
4imageView.addSubview(footerBlur)
5
6NSLayoutConstraint.activate([
7    footerBlur.leadingAnchor.constraint(equalTo: imageView.leadingAnchor),
8    footerBlur.trailingAnchor.constraint(equalTo: imageView.trailingAnchor),
9    footerBlur.bottomAnchor.constraint(equalTo: imageView.bottomAnchor),
10    footerBlur.heightAnchor.constraint(equalToConstant: 120)
11])

This is often better than blurring the full image because it preserves more of the artwork while still giving text a readable background zone.

Know When You Need a Real Image Processing Blur Instead

UIVisualEffectView is a display effect. If you need an actual blurred UIImage to save, upload, or reuse outside the current view hierarchy, use image processing instead of a visual effect overlay.

That is a different problem entirely. For a permanent image result, you would typically use Core Image or another image-processing pipeline. UIVisualEffectView is the right tool only when the goal is a live UIKit effect.

This distinction matters because many bugs come from expecting the blurred overlay to change the image asset itself.

Common Pitfalls

• Expecting UIVisualEffectView to modify the underlying image pixels permanently.
• Adding the blur view outside the image view hierarchy and wondering why the image is not blurred.
• Choosing a blur style without checking whether foreground content remains readable.
• Putting controls above the blur but not inside contentView when layout layering matters.
• Using a live blur effect when the requirement is actually to generate a new blurred image file.

Summary

• 'UIVisualEffectView is the standard UIKit way to blur an image that is already on screen.'
• Place it above the UIImageView, because it blurs what is rendered behind it.
• Use contentView for labels or buttons that sit above the blur.
• Blur only part of the image when full-screen blur is visually too heavy.
• If you need a permanently blurred image asset, switch to real image processing instead of a visual effect overlay.