Index

The <feBlend> SVG filter primitive composes two objects together ruled by a certain blending mode. This is similar to what is known from image editing software when blending two layers. The mode is defined by the {{SVGAttr("mode")}} attribute.

Like other filter primitives, it handles color components in the linearRGB {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use sRGB instead.

Usage context

{{svginfo}}

Attributes

• {{SVGAttr("in")}}
• {{SVGAttr("in2")}}
• {{SVGAttr("mode")}}
• Filter primitive attributes: {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, {{SVGAttr("height")}}, {{SVGAttr("result")}}

DOM Interface

This element implements the {{domxref("SVGFEBlendElement")}} interface.

Example

SVG

<svg
  width="200"
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feFlood
        result="floodFill"
        x="0"
        y="0"
        width="100%"
        height="100%"
        flood-color="green"
        flood-opacity="1" />
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
    </filter>
  </defs>

  <image
    href="mdn_logo_only_color.png"
    x="10%"
    y="10%"
    width="80%"
    height="80%"
    filter="url(#spotlight)" />
</svg>

Result

{{EmbedLiveSample("Example", 200, 200)}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• SVG filter primitive attributes
• {{SVGElement("filter")}}
• {{SVGElement("animate")}}
• {{SVGElement("set")}}
• {{SVGElement("feColorMatrix")}}
• {{SVGElement("feComponentTransfer")}}
• {{SVGElement("feComposite")}}
• {{SVGElement("feConvolveMatrix")}}
• {{SVGElement("feDiffuseLighting")}}
• {{SVGElement("feDisplacementMap")}}
• {{SVGElement("feFlood")}}
• {{SVGElement("feGaussianBlur")}}
• {{SVGElement("feImage")}}
• {{SVGElement("feMerge")}}
• {{SVGElement("feMorphology")}}
• {{SVGElement("feOffset")}}
• {{SVGElement("feSpecularLighting")}}
• {{SVGElement("feTile")}}
• {{SVGElement("feTurbulence")}}
• SVG tutorial: Filter effects