Skip to main content
.blendMode(mode: BlendMode): Component;

​
Parameters

​
mode
BlendMode
The blend mode. Can be "normal", "multiply", "screen", "overlay", "darken", "lighten", "colorDodge", "colorBurn", "softLight", "hardLight", "difference", "exclusion", "hue", "saturation", "color", "luminosity", "sourceAtop", "destinationOver", "destinationOut", "plusDarker", or "plusLighter".

​
Support

​
Modes

​
Standard Blend Modes

​
normal
string
Default blending mode. The content appears normally with no special blending effects.
​
multiply
string
Darkens the background by multiplying the colors. Results in darker colors overall.
​
screen
string
Lightens the background by inverting, multiplying, and inverting again. Results in lighter colors.
​
overlay
string
Combines multiply and screen modes based on the background color. Dark areas become darker, light areas become lighter.
​
darken
string
Selects the darker color from each RGB channel between the foreground and background.
​
lighten
string
Selects the lighter color from each RGB channel between the foreground and background.
​
colorDodge
string
Brightens the background color using the foreground color. Creates intense highlights.
​
colorBurn
string
Darkens the background color using the foreground color. Creates deep shadows.
​
softLight
string
A softer version of overlay. Creates subtle lighting effects.
​
hardLight
string
A harsher version of overlay. Creates strong lighting effects.
​
difference
string
Subtracts the darker color from the lighter color. Creates high contrast, inverted effects.
​
exclusion
string
Similar to difference but with lower contrast. Creates a softer inverted effect.

​
Color Component Modes

​
hue
string
Uses the hue of the foreground with the saturation and luminosity of the background.
​
saturation
string
Uses the saturation of the foreground with the hue and luminosity of the background.
​
color
string
Uses the hue and saturation of the foreground with the luminosity of the background.
​
luminosity
string
Uses the luminosity of the foreground with the hue and saturation of the background.

​
Porter-Duff Modes

​
sourceAtop
string
Places the foreground on top of the background, clipped to the background’s shape.Platform Support: iOS 🟢 | Web ⚪ | Android ⚪
​
destinationOver
string
Places the background over the foreground.Platform Support: iOS 🟢 | Web ⚪ | Android ⚪
​
destinationOut
string
Uses the background to cut out the foreground, removing overlapping areas.Platform Support: iOS 🟢 | Web ⚪ | Android ⚪

​
Plus Modes

​
plusDarker
string
Adds the colors together, clamping to produce a darker result.Platform Support: iOS 🟢 | Web ⚪ | Android ⚪
​
plusLighter
string
Adds the colors together, clamping to produce a lighter result.

​
Usage

​
Multiply blend

Rectangle()
    .fill(Color("red"))
    .blendMode("multiply")

​
Screen blend

Circle()
    .fill(Color("blue"))
    .blendMode("screen")

​
Overlay blend

Image("texture.jpg")
    .blendMode("overlay")

​
Example

​
Blending Two Rectangles

    ZStack([
        RoundedRectangle()
            .fill(Color('blue'))
            .offset({ x: -20, y: 20 })
            .frame({ width: 100, height: 100 }),
            
        RoundedRectangle()
            .fill(Color("red"))
            .blendMode("difference")
            .frame({ width: 100, height: 100 })
    ])