mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Themode attribute defines the blending mode on the<feBlend> filter primitive.

You can use this attribute with the following SVG elements:

<feBlend>

Example

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">  <filter x="0" y="0" width="100%" height="100%">    <feFlood      result="floodFill"      x="0"      y="0"      width="100%"      height="100%"      flood-color="seagreen"      flood-opacity="1" />    <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />  </filter>  <filter x="0" y="0" width="100%" height="100%">    <feFlood      result="floodFill"      x="0"      y="0"      width="100%"      height="100%"      flood-color="seagreen"      flood-opacity="1" />    <feBlend in="SourceGraphic" in2="floodFill" mode="color-dodge" />  </filter>  <image    href="mdn_logo_only_color.png"    width="200"    height="200"    filter="url(#blending1)" />  <image    x="220"    href="mdn_logo_only_color.png"    width="200"    height="200"    filter="url(#blending2)" /></svg>