Skip to main content
type BlendMode = 
  // Standard blend modes
  | "normal"
  | "multiply"
  | "screen"
  | "overlay"
  | "darken" 
  | "lighten"
  | "colorDodge"
  | "colorBurn"
  | "softLight"
  | "hardLight"
  | "difference"
  | "exclusion"
  // Color component modes
  | "hue"
  | "saturation"
  | "color"
  | "luminosity"
  // Porter-Duff modes
  | "sourceAtop"
  | "destinationOver"
  | "destinationOut"
  // Plus modes
  | "plusDarker"
  | "plusLighter";

​
Values

​
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.

​
Platform Support

Blend ModeiOSWebAndroid
Standard modes✅✅❌
Color component modes✅✅❌
Porter-Duff modes✅❌❌
Plus modes✅plusLighter only❌