SwiftUI - Effects

Effects are known as visual modifications or transformations applied to the view to customize the appearance or behavior of the view. They only enhance the visual appearance of the view, not impact the layout because they are not allowed to modify the layout of the view.

Using these effects we can apply various effects like shadow, blurs, rotation, saturation, hue, etc to any view or component such as Text, Image, Shape, Button, etc. They enhance the user experience by improving the readability of the content or can create interactive components.

Applying Effects in SwiftUI

SwiftUI support a wide range of pre-defined modifiers such as shadow, hover, blur, etc, that can use to enhance the appearance of the view. So simply by using these modifiers, we can apply effects on the views. We can use these modifiers directly with the help of the dot operator, for example −

Text("TutorialsPoint").blur(radius:12)

Example 1

The following SwiftUI program is used to apply the blur effect on the text view.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {            
         // Without any effect
         Text("TutorialsPoint").font(.largeTitle).foregroundStyle(.green)
            
         // With blur effect
         Text("TutorialsPoint")
            .font(.largeTitle)
            .foregroundStyle(.green)
            .blur(radius: 4)
      }.padding()
   }
}
#Preview {
   ContentView()
}

Output

Example 2

The following SwiftUI program is used to apply multiple effects on the text view.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         // Without any effect
         Text("TutorialsPoint").font(.largeTitle).foregroundStyle(.green)
            
         // With multiple effects
         Text("TutorialsPoint")
            .foregroundStyle(.green)
            .padding(20)
            .shadow(radius: 5)
            .rotationEffect(.degrees(10))
            .scaleEffect(2.3)
      }.padding()
   }
}
#Preview {
    ContentView()
}

Output

Types of Effects in SwiftUI

SwiftUI supports the following types of effect−