<feBlend> in SVG: blending two images like a Photoshop layer

In photo editing, stacking two layers in "multiply" or "overlay" mode darkens an area or brings out contrast, without ever touching the original pixels of either layer. In SVG, that same blending logic exists between two sources drawn inside a filter.

<feBlend> combines two image sources, for instance the original shape and a gradient or texture, according to a precise blend mode, exactly like a layer mode in an image editor.

Definition

<feBlend> is an SVG filter primitive that takes two inputs, in and in2, and merges them pixel by pixel according to a mode set by the mode attribute. It lives inside a <filter> element, alongside other primitives such as <feColorMatrix>, and its output can in turn feed another primitive to build a multi-step effect.

Main attributes

• in / in2: the two sources to merge. This can be SourceGraphic (the original element), BackgroundImage, or the output of a previous primitive named through its result.
• mode: the blend mode. The most commonly used values borrow directly from photo-editing vocabulary: normal, multiply (darkens, like two layers of paint stacked together), screen (lightens), overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color and luminosity.

A concrete example

A square blended with a flat orange fill in multiply mode, producing a darkening color-overlay effect, like a photo filter:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="orange-tint" x="-20%" y="-20%" width="140%" height="140%">
      <feFlood flood-color="#f97316" result="tint" />
      <feBlend in="SourceGraphic" in2="tint" mode="multiply" />
    </filter>
  </defs>
  <rect x="30" y="30" width="140" height="140" fill="#1d4ed8" filter="url(#orange-tint)" />
</svg>

The original blue rectangle (SourceGraphic) and the orange fill (tint) combine according to the rules of multiply mode: the result is darker than either source taken alone, exactly like two layers multiplied together in an image editor.

Difference from the CSS mix-blend-mode property

Both share the exact same set of modes (multiply, screen, overlay...), and that is no coincidence: the newer CSS mix-blend-mode property borrowed its list of modes wholesale from <feBlend>, which existed in the SVG specification long before. The CSS property blends an element with whatever sits behind it in the page, in a single line of style, but only works between stacked elements of the document. <feBlend> blends sources internal to a filter, including generated textures such as <feTurbulence> or gradients, which mix-blend-mode cannot produce on its own.

A classic trap

Real-world use case

<feBlend> typically tints a photo or illustration with a brand color in multiply mode, creates a grain or texture effect by blending a shape with noise generated by feTurbulence, or simulates lighting by blending a shape with a gradient in screen or overlay mode.

FAQ

No, a single instance only takes two inputs, in and in2. To blend three or more images, several <feBlend> primitives have to be chained, each one picking up the previous result as its new in input.

The normal mode simply shows in2 on top of in, with no actual color-mixing math involved, like an opaque layer placed above another. The other modes genuinely combine the color values of both sources through a formula specific to each one.

No, support is broad and has been in place for a long time across every modern browser, including on mobile, which makes it a reliable primitive to use in production, unlike some newer filter effects that are still unevenly supported.