<feBlend> combines two inputs using a blend mode, similar to the layer blend modes in Photoshop, GIMP, or Figma.

The result takes the colors of in (the "top" layer) and in2 (the "bottom" layer) and merges them pixel-by-pixel according to the formula for the chosen mode.

If you have ever stacked two layers in an image editor and changed the top layer's blend mode from "Normal" to "Multiply" or "Screen", <feBlend> does the same thing inside an SVG filter graph. It does not decide which pixels are kept (that is what "<feComposite>" does); it only decides how the colors of two already-overlapping layers are mixed.

DOM object: SVGFEBlendElement
SVG2 spec: https://www.w3.org/TR/filter-effects/#feBlendElement

All 16 blend modes

The grid below shows every blend mode SVG supports. Each cell overlaps a red circle on top of a blue circle using the named mode.

Note: For the preview images below, browsers render each cell with CSS mix-blend-mode because <feImage> references to inline elements are not universally supported across browsers. The actual <feBlend> primitive produces identical pixel results — the XML snippet further down is what Donner executes.

Mode families

The 16 modes are grouped into five families by what they do to the underlying pixels:

Darken family — multiply, darken, color-burn. The result is never brighter than either input; white acts as a no-op.
Lighten family — screen, lighten, color-dodge. The result is never darker than either input; black acts as a no-op.
Contrast family — overlay, hard-light, soft-light. Darkens dark areas and brightens bright areas, increasing contrast.
Difference family — difference, exclusion. Produce inverting or contrast-reversing effects based on the distance between the two colors.
HSL family — hue, saturation, color, luminosity. Mix channels of the hue/saturation/luminance color model rather than RGB, letting you transplant one aspect of one color onto another.

Example

A minimal filter that multiplies the source graphic by a solid red background:

<filter id="MyMultiply">
  <feFlood flood-color="#e43a3a" result="red" />
  <feBlend in="SourceGraphic" in2="red" mode="multiply" />
</filter>

Attributes

Attribute	Default	Description
in	previous	First (top) input, named filter result or one of SourceGraphic, SourceAlpha, FillPaint, StrokePaint.
in2	(none)	Second (bottom) input. Required.
mode	normal	One of normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.

Inherits standard filter primitive attributes from SVGFilterPrimitiveStandardAttributes (x, y, width, height, result).