SVG feBlend Filter Primitive
feBlend composites two filter inputs together using a specified blend mode, mirroring familiar CSS mix-blend-mode behavior.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Blending Two Inputs with mode
feBlend takes two inputs, in and in2, and combines them using the algorithm specified by the mode attribute, which accepts values like normal, multiply, screen, darken, and lighten — the same blend mode names familiar from CSS mix-blend-mode, letting SVG filter authors reuse existing blend-mode intuition.
- The in and in2 attributes specify the two inputs being blended together
- mode accepts familiar values like multiply, screen, darken, and lighten
- Reuses the same blend-mode vocabulary and intuition as CSS mix-blend-mode
When to Use feBlend vs CSS mix-blend-mode
CSS mix-blend-mode is simpler for blending an entire element against its backdrop, but feBlend is necessary when the blend needs to happen between two specific filter primitive results within a single filter chain, such as blending a colored flood against a textured pattern before compositing onto the source graphic.
- CSS mix-blend-mode is simpler for blending a whole element against its backdrop
- feBlend is needed to blend two specific results within one filter chain
- Useful for blending a colored flood against a texture before final composite
Frequently Asked Questions
Are feBlend modes the same as CSS mix-blend-mode values?
Yes, feBlend supports the same blend mode names as CSS mix-blend-mode, including normal, multiply, screen, darken, lighten, and several others.
Why use feBlend instead of layering two elements with CSS blending?
feBlend operates inside a single filter chain, letting you blend intermediate filter results like blurs or floods before compositing the final output, which CSS element blending can't do.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG