SwiftUI - Shadow Effect

---

---

Shadow effect is used to apply shadow behind the specified view or component inside the view. It is commonly used to provide depth to the view. It is the most commonly used effect in UI development.

It is used to create an illusion that a view is raised above the background view, it makes that view stand out among all the given views. It is generally used with buttons, images, text, etc. to enhance their visual appearance. In SwiftUI, we can create a shadow effect with the help of the .shadow() modifier.

The shadow() Modifier in SwiftUI

SwiftUI provides a pre-defined modifier named shadow() to create a shadow effect on the given view. It can apply a shadow effect to any view such as image view, text view, button, etc.

Using this modifier we can also change the color of the shadow and can also control the opacity of the shadow.

Syntax

Following is the syntax −

func shadow(color:Color, radius:CGFloat, x:CGFloat, y:CGFloat) -> some View

Parameters

Following is the parameters supported by this modifier −

• color: Represent the color of the shadow. By default the color is black.
• radius: Represent the blur of the shadow. If the value of this parameter is high that means more blur in the shadow.
• x: Represent the amount of offset the shadow horizontally from the view.
• y: Represent the amount of offset the shadow vertically from the view.

Example 1

The following SwiftUI program is used to apply the shadow effect on the given shapes.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Rectangle()
            .fill(.red)
            .frame(width: 150, height: 160)
            .shadow(radius: 10)
            .padding(10)
         Rectangle()
            .fill(.red)
            .frame(width: 150, height: 160)
            .shadow(radius: 50)
            .padding(10)
         Rectangle()
            .fill(.red)
            .frame(width: 150, height: 160)
            .shadow(radius: 0, x: 10.0, y: 10.0)
            .padding(10)
         Rectangle()
            .fill(.red)
            .frame(width: 150, height: 160)
            .shadow(radius: 5, x: 20.0, y: 10.0)
            .padding(10)
      }
   }
}

#Preview {
   ContentView()
}

Output

Example 2

The following SwiftUI program is used to apply the colored shadow effect on the given views.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         
         // Colored Shadow
         Rectangle()
            .fill(.red)
            .frame(width: 150, height: 160)
            .shadow(color:.green, radius: 10)
            .padding(10)
         
         // Shadow on text
         Text("Hello Swift")
            .font(.largeTitle)
            .shadow(color: .red, radius: 20)
         
         // Shadow on image
         Image("wallpaper")
            .frame(width: 100, height: 150)
            .clipShape(Circle())
            .shadow(radius: 10)
      }
   }
}

#Preview {
   ContentView()
}

Output

Inner Shadow in SwiftUI

In SwiftUI, we can style shadow with the help of the .inner() modifier. Inner shadow is basically used to creates an illusion that the edges of the view are indented. We can also apply inner shadow with the help of other styling modifiers such as foregroundStyle(), fill(), etc. It can work only with Text, Image and Shape Views.

Example

The following SwiftUI program is used to apply the inner shadow effect on the given view.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Rectangle()
            .fill(.red.shadow(.inner(radius: 3, x: 6, y: 6)))
            .frame(width: 150, height: 160)
            .padding(10)
         
      }
   }
}

#Preview {
   ContentView()
}

Output

Drop Shadow in SwiftUI

In SwiftUI, we can style shadow with the help of the .drop() modifier. It creates the illusion that the component is lifted above from the background. We can also apply a drop shadow with the help of other styling modifiers such as foregroundStyle(), fill(), etc. It can work only with Text, Image and Shape Views.

Example

The following SwiftUI program is used to apply the drop shadow effect on the given view.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Rectangle()
            .fill(.red.shadow(.drop(radius: 3, x: 6, y: 6)))
            .frame(width: 150, height: 160)
            .padding(10)
         
      }
   }
}

#Preview {
   ContentView()
}

Output