How to Blur a View in SwiftUI

December 3, 2020 By Thomas Prezioso Jr 1 min read

---

SwiftUI makes it easy to add a blur effect to any view. All we need to do is add the .blur() modifier to our view. Let’s see how we can apply this by looking at the example below.

import SwiftUI import PlaygroundSupport struct ContentView: View { var body: some View { ZStack { Color.green.edgesIgnoringSafeArea(.all) Text(“Hello Tom”) } } } PlaygroundPage.current.setLiveView(ContentView())

As you can see in the example we have a ZStack with a green background and a text view. If we want to add a blur effect to our text view all we need to do is add the .blur() modifier to it.

import SwiftUI import PlaygroundSupport struct ContentView: View { var body: some View { ZStack { Color.green.edgesIgnoringSafeArea(.all) Text(“Hello Tom”) .blur(radius: 1.5) } } } PlaygroundPage.current.setLiveView(ContentView())

As you can see above we added the blur effect with a 1.5 radius to our “Hello Tom” text view. It is good to know that the higher the radius the more blurry the view will appear.

Thanks for reading and happy coding!

---

Share this post

Post on X Share on LinkedIn