Skip to main content
type BlendMode =
    | "normal"
    | "multiply"
    | "screen"
    | "overlay"
    | "darken"
    | "lighten"
    | "colorDodge"
    | "colorBurn"
    | "softLight"
    | "hardLight"
    | "difference"
    | "exclusion"
    | "hue"
    | "saturation"
    | "color"
    | "luminosity"
    | "sourceAtop"
    | "destinationOver"
    | "destinationOut"
    | "plusDarker"
    | "plusLighter";
​
normal
string
Default blending. Content appears with no special blending effects.
​
multiply
string
Darkens by multiplying colors. Results in darker tones overall.
​
screen
string
Lightens by inverting, multiplying, and inverting. Results in lighter tones.
​
overlay
string
Combines multiply and screen based on the background. Dark areas darken, light areas lighten.
​
darken
string
Selects the darker color from each channel.
​
lighten
string
Selects the lighter color from each channel.
​
colorDodge
string
Brightens the background using the foreground. Creates intense highlights.
​
colorBurn
string
Darkens the background using the foreground. 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 from the lighter color. Creates high-contrast inverted effects.
​
exclusion
string
Similar to difference but lower contrast. Creates a softer inverted effect.
​
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.
​
sourceAtop
string
Places the foreground on top of the background, clipped to the background’s shape. iOS only.
​
destinationOver
string
Places the background over the foreground. iOS only.
​
destinationOut
string
Uses the background to cut out the foreground. iOS only.
​
plusDarker
string
Adds colors together, clamping to produce a darker result. iOS only.
​
plusLighter
string
Adds colors together, clamping to produce a lighter result.