Shadows in SwiftUI

Shadows are frequently the missing component that gives a view some depth and eliminates the completely flat appearance, which makes a view look more appealing to users. Creating a shadow in SwiftUI is as simple as calling a view modifier and passing it a few variables.

While adding shadows, you have two options. A straightforward all-around shadow with a radius is an option. How many pixels to blur out is determined by the radius. When an object’s default shadow has a radius of zero, it surrounds it with a thin, sometimes appealing grey line.

An alternative would be to define the colour, the blur radius, and the offset of the shadow concerning the centre.

Examples:

var body: some View {
  card
}

var body: some View {
  card
   .shadow(radius: 10)
}

var body: some View {
  card
   .shadow(
                color: .purple,
                radius: 10,
                x: 10,
                y: 10
            )
}

Four parameters are required for the shadow modifier.

Color: specifies the Shadow's color

Radius: defines Shadow's size.

x: With this, you can set the offset to shadows in the horizontal direction.

y: With this, you can set the offset to shadows in the vertical direction.