SwiftUI - Blend Effect

---

---

The blend effect in SwiftUI is used to create various UI designs by combining two or more views with each other. It is a powerful tool to create complex and visually appealing designs or can add various artistic effects in the UI design.

Using this effect, we can blend any component such as text, images, views, containers, etc. Also, we can blend any number of layers, but the minimum requirement is 2 which is a base layer and a blend layer to create the blend effect.

In this chapter, we will learn how we can achieve the blend effect along with various examples.

The ".blendMode" Modifier in SwiftUI

In SwiftUI, we can achieve the blend effect with the help of a pre-defined .blendMode modifier. This modifier blends two more views to create a more aesthetic design. It is responsible for how the colors of the foreground view will blend with the background view's colors.

Syntax

Following is the syntax −

func blendMode(_blendMode:BlendMode) -> some View

This modifier takes only one parameter which is blendMode. It represents the blend mode that we want to apply to the given view.

Different Types of Modes

The .blendMode modifier supports the following modes for the blend. These modes can applied on any view containing text, images, shapes, etc.

They categorized in various categories such as normal, darken, lighten, contrast, invert, mixing color components, accessing poter-duff modes, etc.

Normal: It is the default mode of the .blendMode modifier. It does not apply any blend effect

Darken: These modes are used to get a darker effect by blending the source and destination.

• darken
• multiply
• colorBurn
• plusDarker

Lighten: These modes are used to apply lighten effect on the given view.

• lighten
• screen
• colorDodge
• plusLighter

Contrast: These modes are used to create contrast on the given view.

• overlay
• softLight
• hardLight

Invert: These modes either invert or cancel out the source color according to the destination color.

• difference
• exclusion

Mixing Colors: These modes are used to adjust the color of the specified source and destination.

• hue
• saturation
• color
• luminosity

Poter-duff mode: These modes are used to apply different types of masks to the colors present in the specified UIcomponenets −

• sourceAtop
• destinationOver
• destinationOut

Example 1

The following SwiftUI program blends two views in colorBurn mode.

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Image("wallpaper")
            .resizable()
            .frame(width: 390, height: 300)
            .clipShape(Rectangle())
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.colorBurn)
      }
   }
}

#Preview {
   ContentView()
}

Output

Example 2

The following SwiftUI program blends two views in darken mode.

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Image("wallpaper")
            .resizable()
            .frame(width: 390, height: 300)
            .clipShape(Rectangle())
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.darken)
      }
   }
}

#Preview {
   ContentView()
}

Output

Example 3

The following SwiftUI program blends two views in screen mode.

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Image("wallpaper")
            .resizable()
            .frame(width: 390, height: 300)
            .clipShape(Rectangle())
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.screen)
      }
   }
}

#Preview {
   ContentView()
}

Output

Multiple Blending Mode in SwiftUI

In SwiftUI, we cannot use multiple blend mode modifiers together if we try to do so then only the nearest blendMode() modifier will take action and the remaining modifiers will discarded.

struct ContentView: View {
   var body: some View {
      ZStack {
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.darken)
            .blendMode(.destinationOut)
            .blendMode(.colorBurn)
      }
   }
}

Here the blendMode(.darken) will executed and .blendMode(.destinationOut) and .blendMode(.colorBurn) will be discarded. If we want to use multiple blending modes then we have to use them in different layers.

Example

The Following SwiftUI program uses multiple blendMode() modifier.

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Image("wallpaper")
            .resizable()
            .frame(width: 390, height: 300)
            .clipShape(Rectangle())
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.colorBurn)
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.hardLight)

      }
   }
}

#Preview {
   ContentView()
}

Output