Contents

blendMode(_:)

Sets the blend mode for compositing this view with overlapping views.

Declaration

nonisolated func blendMode(_ blendMode: BlendMode) -> some View

Parameters

  • blendMode:

    The Blendmode for compositing this view.

Return Value

A view that applies blendMode to this view.

Discussion

Use blendMode(_:) to combine overlapping views and use a different visual effect to produce the result. The BlendMode enumeration defines many possible effects.

In the example below, the two overlapping rectangles have a BlendMode.colorBurn effect applied, which effectively removes the non-overlapping portion of the second image:

HStack {
    Color.yellow.frame(width: 50, height: 50, alignment: .center)

    Color.red.frame(width: 50, height: 50, alignment: .center)
        .rotationEffect(.degrees(45))
        .padding(-20)
        .blendMode(.colorBurn)
}

[Image]

See Also

Compositing views