SVG <feBlend> Filter

Last Updated:

What is <feBlend> filter?

The <feBlend> SVG filter primitive composes two objects together ruled by a certain blending mode.

In this example, we will blend the image with "multiply" mode.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="point"> <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="#339933" flood-opacity="1"/> <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/> </filter> </defs> <image xlink:href="car-left.png" x="10%" y="10%" width="80%" height="80%" filter="url(#point)"/> </svg> </body> </html>

Attributes Value

AttributeExplanation
in Identifies the input for the given filter primitive.
in2 Identifies the second input for the given filter primitive.
mode Specifies the blending mode on the <feBlend> filter primitive.
Possible values are:
  • multiply
  • color-dodge

Share this Page

Meet the Author