Introduction

The classic "iOS 7 blur view" is the frosted-glass effect Apple popularized in translucent navigation bars, alerts, and overlay panels. In modern UIKit, the right way to build that effect is not manual screenshot blurring or Core Image plumbing, but UIVisualEffectView with a UIBlurEffect.

Use the Built-In Blur API

Older examples on the internet often capture the background, blur an image, and place the result behind foreground content. That used to be common before Apple exposed a clean API, but it is now the wrong default for normal app UI.

The core UIKit pieces are:

• 'UIBlurEffect to define the style'
• 'UIVisualEffectView to render the effect'
• optionally UIVibrancyEffect for clearer foreground content

A minimal full-screen blur looks like this:

1import UIKit
2
3final class BlurDemoViewController: UIViewController {
4    override func viewDidLoad() {
5        super.viewDidLoad()
6
7        view.backgroundColor = .systemBlue
8
9        let blur = UIBlurEffect(style: .light)
10        let blurView = UIVisualEffectView(effect: blur)
11        blurView.frame = view.bounds
12        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
13
14        view.addSubview(blurView)
15    }
16}

If you specifically want the older iOS 7 feel, .light is usually the closest starting point.

Add Content Through contentView

A blur view is not just a decoration. It also gives you a content container for controls and labels that should appear above the blurred background.

1import UIKit
2
3final class BlurCardViewController: UIViewController {
4    override func viewDidLoad() {
5        super.viewDidLoad()
6        view.backgroundColor = .systemBackground
7
8        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .systemMaterial))
9        blurView.translatesAutoresizingMaskIntoConstraints = false
10        blurView.layer.cornerRadius = 16
11        blurView.clipsToBounds = true
12
13        let label = UILabel()
14        label.translatesAutoresizingMaskIntoConstraints = false
15        label.text = "Blurred card"
16        label.font = .preferredFont(forTextStyle: .headline)
17
18        view.addSubview(blurView)
19        blurView.contentView.addSubview(label)
20
21        NSLayoutConstraint.activate([
22            blurView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
23            blurView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
24            blurView.widthAnchor.constraint(equalToConstant: 240),
25            blurView.heightAnchor.constraint(equalToConstant: 120),
26            label.centerXAnchor.constraint(equalTo: blurView.contentView.centerXAnchor),
27            label.centerYAnchor.constraint(equalTo: blurView.contentView.centerYAnchor)
28        ])
29    }
30}

Using contentView matters. It keeps the hierarchy correct and makes blur animations and resizing behave predictably.

Picking a Blur Style

The original blur styles are .extraLight, .light, and .dark. Newer UIKit versions also provide material-based styles such as .systemMaterial and .systemThinMaterial.

A practical rule:

• use .light or .dark if you want the classic effect or are maintaining older visual language
• use material styles if you want better adaptation to modern appearance and contrast behavior

The blur is dynamic, so it samples what is visually behind the effect view. That is why layering matters. If the hierarchy is wrong, the blur may appear weak or may seem to blur the wrong content.

Add Vibrancy When Foreground Content Needs Contrast

Blur softens the background, but text and icons can still look muted. A vibrancy effect makes selected foreground content stand out more clearly.

1import UIKit
2
3let blur = UIBlurEffect(style: .light)
4let blurView = UIVisualEffectView(effect: blur)
5
6let vibrancyView = UIVisualEffectView(effect: UIVibrancyEffect(blurEffect: blur))
7vibrancyView.frame = blurView.bounds
8vibrancyView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
9
10let label = UILabel()
11label.text = "Settings"
12label.sizeToFit()
13
14blurView.contentView.addSubview(vibrancyView)
15vibrancyView.contentView.addSubview(label)

Vibrancy is useful, but it should be intentional. Not every blurred panel needs it.

Performance and Layout Notes

The system blur view is optimized, but it still does real work. A few practical guidelines help:

• avoid stacking many blur views on top of each other
• clip the blur view when using rounded corners
• prefer one well-placed blur container over several nested ones
• test scrolling performance if blur appears inside reusable cells

If you are building a modal card or floating panel, treat the blur view as the visual shell and keep the internal content hierarchy simple.

Common Pitfalls

The most common mistake is adding subviews directly to the effect view instead of to contentView. UIKit expects the visible foreground content to live in that dedicated container.

Another issue is overengineering the effect. Screenshot-based blur pipelines are usually slower, more fragile, and harder to keep visually correct than UIVisualEffectView.

Rounded corners are another frequent source of confusion. Without clipsToBounds = true, the blur effect will continue drawing beyond the rounded shape and the card will not look clean.

Finally, do not assume that the old iOS 7 styles are always the best choice in a modern app. If the goal is simply "nice translucency," the newer material styles usually integrate better with current system design.

Summary

• Use UIVisualEffectView for an iOS-style blur view.
• Configure its appearance with UIBlurEffect.
• Add labels and controls to the blur view's contentView.
• Use vibrancy only when foreground content needs extra separation.
• Avoid manual image-blur tricks unless you truly need a custom visual effect.