SwiftUI Image Blur

SwiftUI Image Blur

In SwiftUI, you can apply a blur effect to an image using the .blur() modifier. This effect is useful for creating depth, highlighting text over images, or achieving artistic designs.

In this tutorial, we will demonstrate how to apply blur effects to images with examples.

---

When to Use Blur Effects

Blur effects are useful in scenarios like:

1. Enhancing focus on specific UI elements by softening the background.
2. Adding visual depth to layered designs.
3. Creating aesthetic and artistic styles for images.

---

Syntax to Apply Blur

Here’s the basic syntax for applying a blur effect to an image:

Image("imageName")
    .blur(radius: blurRadius)

Here, blurRadius is a Double that defines the strength of the blur effect.

---

Examples to Apply Blur

In the following examples, we display both the original and blurred versions of an image in a vertical stack for a visually appealing layout.

Example 1: Applying Blur to Image with Radius of 10

In this example, we apply a strong blur effect to an image and display it below the original image.

File: ContentView.swift

// ContentView.swift
// Created by TUTORIALKART.com

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FullBlurImageView()
    }
  }
}

struct FullBlurImageView: View {
  var body: some View {
    VStack(spacing: 20) {
      VStack {
        Image("sampleImage")
          .resizable()
          .scaledToFit()
          .frame(width: 250)

        Text("Original Image")
          .font(.caption)
      }

      VStack {
        Image("sampleImage")
          .resizable()
          .scaledToFit()
          .frame(width: 250)
          .blur(radius: 10)

        Text("Blurred Image")
          .font(.caption)
      }
    }
    .padding()
  }
}

#Preview {
  ContentView()
}

Detailed Explanation

1. VStack: Aligns the original and blurred images vertically for better visual presentation.
2. Original Image: Displays the image without any blur effect.
3. Blurred Image: Applies a blur effect with a radius of 10 points using .blur(radius: 10).
4. .frame: Sets the width of both images to 250 points for improved visibility.

Output

---

Example 2: Applying Subtle Blur

In this example, we apply a subtle blur effect to an image and display it below the original image.

File: ContentView.swift

// ContentView.swift
// Created by TUTORIALKART.com

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      SubtleBlurImageView()
    }
  }
}

struct SubtleBlurImageView: View {
  var body: some View {
    VStack(spacing: 20) {
      VStack {
        Image("sampleImage")
          .resizable()
          .scaledToFit()
          .frame(width: 250)

        Text("Original Image")
          .font(.caption)
      }

      VStack {
        Image("sampleImage")
          .resizable()
          .scaledToFit()
          .frame(width: 250)
          .blur(radius: 2)

        Text("Subtly Blurred Image")
          .font(.caption)
      }
    }
    .padding()
  }
}

#Preview {
  ContentView()
}

Detailed Explanation

1. VStack: Aligns the original and subtly blurred images vertically for better visual presentation.
2. Original Image: Displays the image without any blur effect.
3. Blurred Image: Applies a subtle blur effect with a radius of 2 points using .blur(radius: 2).
4. .frame: Sets the width of both images to 250 points for improved visibility.

Output

---

Conclusion

Applying blur effects to images in SwiftUI is an effective way to enhance visual aesthetics and create focus. Whether you use strong or subtle blur effects, the .blur() modifier provides flexibility to suit your design needs.