> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# BlendMode

> Specifies how a view's content blends with the content behind it.

```typescript theme={null}
type BlendMode =
    | "normal"
    | "multiply"
    | "screen"
    | "overlay"
    | "darken"
    | "lighten"
    | "colorDodge"
    | "colorBurn"
    | "softLight"
    | "hardLight"
    | "difference"
    | "exclusion"
    | "hue"
    | "saturation"
    | "color"
    | "luminosity"
    | "sourceAtop"
    | "destinationOver"
    | "destinationOut"
    | "plusDarker"
    | "plusLighter";
```

<ParamField path="normal" type="string">
  Default blending. Content appears with no special blending effects.
</ParamField>

<ParamField path="multiply" type="string">
  Darkens by multiplying colors. Results in darker tones overall.
</ParamField>

<ParamField path="screen" type="string">
  Lightens by inverting, multiplying, and inverting. Results in lighter tones.
</ParamField>

<ParamField path="overlay" type="string">
  Combines multiply and screen based on the background. Dark areas darken, light areas lighten.
</ParamField>

<ParamField path="darken" type="string">
  Selects the darker color from each channel.
</ParamField>

<ParamField path="lighten" type="string">
  Selects the lighter color from each channel.
</ParamField>

<ParamField path="colorDodge" type="string">
  Brightens the background using the foreground. Creates intense highlights.
</ParamField>

<ParamField path="colorBurn" type="string">
  Darkens the background using the foreground. Creates deep shadows.
</ParamField>

<ParamField path="softLight" type="string">
  A softer version of overlay. Creates subtle lighting effects.
</ParamField>

<ParamField path="hardLight" type="string">
  A harsher version of overlay. Creates strong lighting effects.
</ParamField>

<ParamField path="difference" type="string">
  Subtracts the darker from the lighter color. Creates high-contrast inverted effects.
</ParamField>

<ParamField path="exclusion" type="string">
  Similar to difference but lower contrast. Creates a softer inverted effect.
</ParamField>

<ParamField path="hue" type="string">
  Uses the hue of the foreground with the saturation and luminosity of the background.
</ParamField>

<ParamField path="saturation" type="string">
  Uses the saturation of the foreground with the hue and luminosity of the background.
</ParamField>

<ParamField path="color" type="string">
  Uses the hue and saturation of the foreground with the luminosity of the background.
</ParamField>

<ParamField path="luminosity" type="string">
  Uses the luminosity of the foreground with the hue and saturation of the background.
</ParamField>

<ParamField path="sourceAtop" type="string">
  Places the foreground on top of the background, clipped to the background's shape. iOS only.
</ParamField>

<ParamField path="destinationOver" type="string">
  Places the background over the foreground. iOS only.
</ParamField>

<ParamField path="destinationOut" type="string">
  Uses the background to cut out the foreground. iOS only.
</ParamField>

<ParamField path="plusDarker" type="string">
  Adds colors together, clamping to produce a darker result. iOS only.
</ParamField>

<ParamField path="plusLighter" type="string">
  Adds colors together, clamping to produce a lighter result.
</ParamField>