BlendMode in SwiftUI

BlendMode enum combined with blendMode modifier is used to combine overlapping view with different visual effects.

There are 21 blend modes so let’s look at their effect by building an example.

We will need two images so head over to pexels.com to download two photos to blend.

We will import these into Assets folder and will call them “pic1” and “pic2”

Let’s put them in a view.

struct DevTechieBlendModeExample: View {
    @State private var mode: BlendMode = .color
    var body: some View {
        VStack {
            ZStack {
                Image("pic1")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 400, height: 400)
                
                Image("pic2")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 400, height: 400)
                    .blendMode(mode)
            }
            
            Spacer()
            
            Picker("Pick blend mode", selection: $mode) {
                Group {
                    Text("color")
                        .tag(BlendMode.color)
                    
                    Text("colorBurn")
                        .tag(BlendMode.colorBurn)
                    
                    Text("colorDodge")
                        .tag(BlendMode.colorDodge)
                    
                    Text("darken")
                        .tag(BlendMode.darken)
                    
                    Text("destinationOut")
                        .tag(BlendMode.destinationOut)
                    
                    Text("destinationOver")
                        .tag(BlendMode.destinationOver)
                    
                    Text("difference")
                        .tag(BlendMode.difference)
                    
                    Text("exclusion")
                        .tag(BlendMode.exclusion)
                    
                    Text("hardLight")
                        .tag(BlendMode.hardLight)
                }
                
                Group {
                    Text("hue")
                        .tag(BlendMode.hue)
                    
                    Text("lighten")
                        .tag(BlendMode.lighten)
                    
                    Text("luminosity")
                        .tag(BlendMode.luminosity)
                    
                    Text("multiply")
                        .tag(BlendMode.multiply)
                    
                    Text("normal")
                        .tag(BlendMode.normal)
                    
                    Text("overlay")
                        .tag(BlendMode.overlay)
                    
                    Text("plusDarker")
                        .tag(BlendMode.plusDarker)
                    
                    Text("plusLighter")
                        .tag(BlendMode.plusLighter)
                    
                    Text("saturation")
                        .tag(BlendMode.saturation)
                    
                    Text("screen")
                        .tag(BlendMode.screen)
                }
                
                Group {
                    Text("softLight")
                        .tag(BlendMode.softLight)
                    
                    Text("sourceAtop")
                        .tag(BlendMode.sourceAtop)
                }
            }
            .pickerStyle(.wheel)
        }
    }
}

Build and run

Another interesting effect is if we blend two color view, different blend mode has different effect. For example, BlendMode.colorBurn removes non-overlapping portion of second view so does many other but not all.

struct DevTechieBlendModeExample: View {
    @State private var mode: BlendMode = .color
    var body: some View {
        VStack {
            HStack {
                Color.yellow.frame(width: 200, height: 200, alignment: .center)
                
                Color.red.frame(width: 200, height: 200, alignment: .center)
                    .rotationEffect(.degrees(45))
                    .padding(-70)
                    .blendMode(mode)
            }
            .rotationEffect(.degrees(-90))
            
            
            Picker("Pick blend mode", selection: $mode) {
                Group {
                    Text("color")
                        .tag(BlendMode.color)
                    
                    Text("colorBurn")
                        .tag(BlendMode.colorBurn)
                    
                    Text("colorDodge")
                        .tag(BlendMode.colorDodge)
                    
                    Text("darken")
                        .tag(BlendMode.darken)
                    
                    Text("destinationOut")
                        .tag(BlendMode.destinationOut)
                    
                    Text("destinationOver")
                        .tag(BlendMode.destinationOver)
                    
                    Text("difference")
                        .tag(BlendMode.difference)
                    
                    Text("exclusion")
                        .tag(BlendMode.exclusion)
                    
                    Text("hardLight")
                        .tag(BlendMode.hardLight)
                }
                
                Group {
                    Text("hue")
                        .tag(BlendMode.hue)
                    
                    Text("lighten")
                        .tag(BlendMode.lighten)
                    
                    Text("luminosity")
                        .tag(BlendMode.luminosity)
                    
                    Text("multiply")
                        .tag(BlendMode.multiply)
                    
                    Text("normal")
                        .tag(BlendMode.normal)
                    
                    Text("overlay")
                        .tag(BlendMode.overlay)
                    
                    Text("plusDarker")
                        .tag(BlendMode.plusDarker)
                    
                    Text("plusLighter")
                        .tag(BlendMode.plusLighter)
                    
                    Text("saturation")
                        .tag(BlendMode.saturation)
                    
                    Text("screen")
                        .tag(BlendMode.screen)
                }
                
                Group {
                    Text("softLight")
                        .tag(BlendMode.softLight)
                    
                    Text("sourceAtop")
                        .tag(BlendMode.sourceAtop)
                }
            }
            .pickerStyle(.wheel)
        }
    }
}