Below is a quick reference for how the various BlendMode cases work in SwiftUI. I've used the three primary colors to show how they interact when placed atop on another. For reference, red is on top, then yellow in the middle, and blue on the bottom.
Before getting started, please consider subscribing using this link, and if you aren't reading this on TrailingClosure.com, please come check us out sometime!
.color
The Color blend mode preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.
.colorBurn
The Color Burn mode divides the inverted bottom layer by the top layer, and then inverts the result. This darkens the top layer increasing the contrast to reflect the color of the bottom layer. The darker the bottom layer, the more its color is used. Blending with white produces no difference. When top layer contains a homogeneous color, this effect is equivalent to changing the black point to the inverted color.
.colorDodge
The Color Dodge blend mode divides the bottom layer by the inverted top layer. This lightens the bottom layer depending on the value of the top layer: the brighter the top layer, the more its color affects the bottom layer. Blending any color with white gives white. Blending with black does not change the image.
.darken
Darken Only creates a pixel that retains the smallest components of the foreground and background pixels.
.destinationOut
The existing content is kept where it doesn't overlap the new shape.
.destinationOver
Content is drawn behind the existing canvas content.
.difference
Difference subtracts the bottom layer from the top layer or the other way round, to always get a positive value. Blending with black produces no change, as values for all colors are 0. (The RGB value for black is (0,0,0).) Blending with white inverts the picture.
.exclusion
Blending with white inverts the base color values, while blending with black produces no change. However, Blending with 50% gray produces 50% gray.
.hardLight
Hard Light is also a combination of Multiply and Screen. Hard Light affects the blend layer's relationship to the base layer in the same way Overlay affects the base layer's relationship to the blend layer. The inverse relationship between Overlay and Hard Light makes them "commuted blend modes"
.hue
The Hue blend mode preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.
.lighten
Lighten Only has the opposite action of Darken Only. It selects the maximum of each component from the foreground and background pixels.
.luminosity
The Luminosity blend mode preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.
.multiply
Multiply blend mode multiplies the RGB channel numbers for each pixel from the top layer with the values for the corresponding pixel from the bottom layer. The result is always a darker picture; since each value is less than 1, their product will be less than either of the initial values.
.normal
This is the standard blend mode which uses the top layer alone, without mixing its colors with the layer beneath it.
.overlay
Overlay combines Multiply and Screen blend modes. The parts of the top layer where the base layer is light become lighter, the parts where the base layer is dark become darker. Areas where the top layer are mid grey are unaffected. An overlay with the same picture looks like an S-curve.
.plusDarker
This blend mode simply adds pixel values of one layer with the other then subtracts 1 from the end values.
.plusLighter
This blend mode simply adds pixel values of one layer with the other.
.saturation
The Saturation blend mode preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.
.screen
With Screen blend mode the values of the pixels in the two layers are inverted, multiplied, and then inverted again. This yields the opposite effect to multiply, and results in a brighter picture.
.softLight
Soft light is most closely related to Overlay and is only similar to Hard Light by name. Different for every program.
.sourceAtop
The Source Atop and Destination Atop composition modes combine the alpha channels of the source and destination images, before blending the source on top of the destination or vice versa.
Support Future Posts
Please consider subscribing using this link, and if you aren't reading this on TrailingClosure.com, please come check us out sometime!