Blending modes

Blending modes play an important role in digital design, allowing designers to easily create complex visual effects such as overlays and textures. They are essential for tasks such as photo manipulation, creating lighting effects, and adding depth to images.

Blending modes, as the name suggests, mix the colors of multiple layers of pixels using mathematical formulas to determine the contribution of each pixel to the final image. You can combine as many layers as you like, but at a minimum you need two layers—a base layer and a blending layer—to create a blending mode effect.

In this article, we'll take a closer look at blend modes, why they're important, how they're implemented, and how to use them in SwiftUI.

Blending Modes in SwiftUI

SwiftUI supports the following blend modes:

public enum BlendMode : Sendable {
    case normal
    case multiply
    case screen
    case overlay
    case darken
    case lighten
    case colorDodge
    case colorBurn
    case softLight
    case hardLight
    case difference
    case exclusion
    case hue
    case saturation
    case color
    case luminosity
    case sourceAtop
    case destinationOver
    case destinationOut
    case plusDarker
    case plusLighter
}

Blending modes can be applied to a variety of components, not just images. In SwiftUI, blending modes can be used with any view, including text, shapes, and even entire containers that contain multiple elements.

However, for simplicity, only an image will be used in the examples in this article.

Here's some sample SwiftUI code that I'll use to explore the different blend modes:

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .trailing) {
            Image("porsche")
                .resizable()
                .scaledToFill()
            
            Rectangle()
                .fill(Color.red)
                .frame(height: 178)
        }
        .frame(width: 533, height: 355)
    }
}

The result of executing the code above:

Normal

The Normal blending mode displays the top layer as is, without blending it with the layer below. This is the default mode, ensuring that each layer appears as intended.

So, adding .blendMode(.normal) To Rectangle we get an image identical to our original one:

Multiplication

The Multiply blending mode darkens the image by multiplying the color values. [RGB] top and bottom layers. It is great for adding shadows and creating depth.

Since color values ​​range from 0 to 255, multiplying both values ​​and then dividing by 255 makes it easy to normalize the result to that range.

Screen

The Screen blending mode brightens the image by combining the color values ​​of the layers. It is useful for highlights and creating a glowing/dreamy effect.

Overlay

The overlay blending mode enhances textures by increasing contrast, darkening dark areas, and brightening light areas. It combines the multiple and screen modes, based on the pixel values ​​of the underlying layer.

Hard Light

Hard Light uses the same principles as overlay, but reverses the roles of the layers.

It increases contrast by taking into account the brightness of the top layer, making it ideal for dramatic lighting effects.

Both blending modes enhance contrast, but Overlay focuses on the brightness of the underlying layer, while Hard Light focuses on the brightness of the top layer. Overlay is typically used to enhance textures and add depth, while Hard Light is preferred for creating intense highlights and dramatic highlights or shadows.

Color Dodge

Color dodge brightens an image by splitting the bottom color into an inversion of the top color. It creates bright highlights, often used to add depth and realism.

Experimenting with blend modes in SwiftUI can greatly improve the visual appeal of your design. For more information on the formulas behind these blend modes, read this article Wikipedia.

And also come to free webinar our IOS Developer course. Registration open via link.