SVG filtersBaseline · Widely available

The <filter> SVG element applies custom effects such as color manipulation, blurring, or morphing to SVG elements.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jul 29, 2015. Widely available since Jan 29, 2018.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–4Not supported

5+Supportedsince May 25, 2010

Current: 155

Edge

12+Supportedsince Jul 29, 2015

Current: 154

Firefox

1–2Not supported

3+Supportedsince Jun 17, 2008

Current: 157

Safari

1–5.1Not supported

6+Supportedsince Jul 25, 2012

Current: 27

MobileChrome Android

18+Supportedsince Jun 27, 2012

Current: 155

Firefox Android

4+Supportedsince Mar 29, 2011

Current: 157

Safari iOS

1–5Not supported

6+Supportedsince Sep 10, 2012

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: SVGFEBlendElement.

Feature detection

JS · check before using

if ("SVGFilterElement" in globalThis) {
  // SVGFilterElement is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

drafts.csswg.org/filter-effects-1 ↗

Usage share

caniuse.com/svg-filters ↗

Sub-features

Support for each part of the feature (324). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
SVGFEBlendElement	5	12	3	6	18	4	6
SVGFEBlendElement.height	5	12	3	6	18	4	6
SVGFEBlendElement.in1	5	12	3	6	18	4	6
SVGFEBlendElement.in2	5	12	3	6	18	4	6
SVGFEBlendElement.mode	5	12	3	6	18	4	6
SVGFEBlendElement.result	5	12	3	6	18	4	6
SVGFEBlendElement.width	5	12	3	6	18	4	6
SVGFEBlendElement.x	5	12	3	6	18	4	6
SVGFEBlendElement.y	5	12	3	6	18	4	6
SVGFEColorMatrixElement	5	12	3	6	18	4	6
SVGFEColorMatrixElement.height	5	12	3	6	18	4	6
SVGFEColorMatrixElement.in1	5	12	3	6	18	4	6
SVGFEColorMatrixElement.result	5	12	3	6	18	4	6
SVGFEColorMatrixElement.type	5	12	3	6	18	4	6
SVGFEColorMatrixElement.values	5	12	3	6	18	4	6
SVGFEColorMatrixElement.width	5	12	3	6	18	4	6
SVGFEColorMatrixElement.x	5	12	3	6	18	4	6
SVGFEColorMatrixElement.y	5	12	3	6	18	4	6
SVGFEComponentTransferElement	5	12	3	6	18	4	6
SVGFEComponentTransferElement.height	5	12	29	6	18	29	6

Show 304 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
SVGFEComponentTransferElement.in1	5	12	3	6	18	4	6
SVGFEComponentTransferElement.result	5	12	29	6	18	29	6
SVGFEComponentTransferElement.width	5	12	29	6	18	29	6
SVGFEComponentTransferElement.x	5	12	29	6	18	29	6
SVGFEComponentTransferElement.y	5	12	29	6	18	29	6
SVGFECompositeElement	5	12	3	6	18	4	6
SVGFECompositeElement.height	5	12	3	6	18	4	6
SVGFECompositeElement.in1	5	12	3	6	18	4	6
SVGFECompositeElement.in2	5	12	3	6	18	4	6
SVGFECompositeElement.k1	5	12	3	6	18	4	6
SVGFECompositeElement.k2	5	12	3	6	18	4	6
SVGFECompositeElement.k3	5	12	3	6	18	4	6
SVGFECompositeElement.k4	5	12	3	6	18	4	6
SVGFECompositeElement.operator	5	12	3	6	18	4	6
SVGFECompositeElement.result	5	12	3	6	18	4	6
SVGFECompositeElement.width	5	12	3	6	18	4	6
SVGFECompositeElement.x	5	12	3	6	18	4	6
SVGFECompositeElement.y	5	12	3	6	18	4	6
SVGFEConvolveMatrixElement	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.bias	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.divisor	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.edgeMode	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.height	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.in1	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.kernelMatrix	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.kernelUnitLengthX	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.kernelUnitLengthY	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.orderX	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.orderY	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.preserveAlpha	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.result	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.targetX	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.targetY	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.width	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.x	6	12	3	6	18	4	6
SVGFEConvolveMatrixElement.y	6	12	3	6	18	4	6
SVGFEDiffuseLightingElement	5	12	3	6	18	4	6
SVGFEDiffuseLightingElement.diffuseConstant	5	12	3	6	18	4	6
SVGFEDiffuseLightingElement.height	5	12	3	6	18	4	6
SVGFEDiffuseLightingElement.in1	5	12	3	6	18	4	6
SVGFEDiffuseLightingElement.kernelUnitLengthX	5	12	3	6	18	4	6
SVGFEDiffuseLightingElement.kernelUnitLengthY	5	12	3	6	18	4	6
SVGFEDiffuseLightingElement.result	5	12	3	6	18	4	6
SVGFEDiffuseLightingElement.surfaceScale	5	12	3	6	18	4	6
SVGFEDiffuseLightingElement.width	5	12	3	6	18	4	6
SVGFEDiffuseLightingElement.x	5	12	3	6	18	4	6
SVGFEDiffuseLightingElement.y	5	12	3	6	18	4	6
SVGFEDisplacementMapElement	5	12	3	6	18	4	6
SVGFEDisplacementMapElement.height	5	12	3	6	18	4	6
SVGFEDisplacementMapElement.in1	5	12	3	6	18	4	6
SVGFEDisplacementMapElement.in2	5	12	3	6	18	4	6
SVGFEDisplacementMapElement.result	5	12	3	6	18	4	6
SVGFEDisplacementMapElement.scale	5	12	3	6	18	4	6
SVGFEDisplacementMapElement.width	5	12	3	6	18	4	6
SVGFEDisplacementMapElement.x	5	12	3	6	18	4	6
SVGFEDisplacementMapElement.xChannelSelector	5	12	3	6	18	4	6
SVGFEDisplacementMapElement.y	5	12	3	6	18	4	6
SVGFEDisplacementMapElement.yChannelSelector	5	12	3	6	18	4	6
SVGFEDistantLightElement	5	12	3	6	18	4	6
SVGFEDistantLightElement.azimuth	5	12	3	6	18	4	6
SVGFEDistantLightElement.elevation	5	12	3	6	18	4	6
SVGFEDropShadowElement	13	79	30	6	18	30	6
SVGFEDropShadowElement.dx	13	79	30	6	18	30	6
SVGFEDropShadowElement.dy	13	79	30	6	18	30	6
SVGFEDropShadowElement.height	13	79	30	6	18	30	6
SVGFEDropShadowElement.in1	13	79	30	6	18	30	6
SVGFEDropShadowElement.result	13	79	30	6	18	30	6
SVGFEDropShadowElement.setStdDeviation	13	79	30	6	18	30	6
SVGFEDropShadowElement.stdDeviationX	13	79	30	6	18	30	6
SVGFEDropShadowElement.stdDeviationY	13	79	30	6	18	30	6
SVGFEDropShadowElement.width	13	79	30	6	18	30	6
SVGFEDropShadowElement.x	13	79	30	6	18	30	6
SVGFEDropShadowElement.y	13	79	30	6	18	30	6
SVGFEFloodElement	5	12	3	6	18	4	6
SVGFEFloodElement.height	5	12	35	6	18	35	6
SVGFEFloodElement.result	5	12	35	6	18	35	6
SVGFEFloodElement.width	5	12	35	6	18	35	6
SVGFEFloodElement.x	5	12	35	6	18	35	6
SVGFEFloodElement.y	5	12	35	6	18	35	6
SVGFEFuncAElement	5	12	3	6	18	4	6
SVGFEFuncBElement	5	12	3	6	18	4	6
SVGFEFuncGElement	5	12	3	6	18	4	6
SVGFEFuncRElement	5	12	3	6	18	4	6
SVGFEGaussianBlurElement	5	12	3	6	18	4	6
SVGFEGaussianBlurElement.edgeMode	✕	✕	✕	8	✕	✕	8
SVGFEGaussianBlurElement.height	5	12	29	6	18	29	6
SVGFEGaussianBlurElement.in1	5	12	3	6	18	4	6
SVGFEGaussianBlurElement.result	5	12	29	6	18	29	6
SVGFEGaussianBlurElement.setStdDeviation	5	12	3	6	18	4	6
SVGFEGaussianBlurElement.stdDeviationX	5	12	3	6	18	4	6
SVGFEGaussianBlurElement.stdDeviationY	5	12	3	6	18	4	6
SVGFEGaussianBlurElement.width	5	12	29	6	18	29	6
SVGFEGaussianBlurElement.x	5	12	29	6	18	29	6
SVGFEGaussianBlurElement.y	5	12	29	6	18	29	6
SVGFEImageElement	5	12	3	6	18	4	6
SVGFEImageElement.crossOrigin	✕	✕	114	✕	✕	114	✕
SVGFEImageElement.height	5	12	3	6	18	4	6
SVGFEImageElement.href	5	12	3	6	18	4	6
SVGFEImageElement.preserveAspectRatio	5	12	22	6	18	22	6
SVGFEImageElement.result	5	12	3	6	18	4	6
SVGFEImageElement.width	5	12	3	6	18	4	6
SVGFEImageElement.x	5	12	3	6	18	4	6
SVGFEImageElement.y	5	12	3	6	18	4	6
SVGFEMergeElement	5	12	3	6	18	4	6
SVGFEMergeElement.height	5	12	3	6	18	4	6
SVGFEMergeElement.result	5	12	3	6	18	4	6
SVGFEMergeElement.width	5	12	3	6	18	4	6
SVGFEMergeElement.x	5	12	3	6	18	4	6
SVGFEMergeElement.y	5	12	3	6	18	4	6
SVGFEMergeNodeElement	5	12	3	6	18	4	6
SVGFEMergeNodeElement.in1	5	12	3	6	18	4	6
SVGFEMorphologyElement	5	12	3	6	18	4	6
SVGFEMorphologyElement.height	5	12	3	6	18	4	6
SVGFEMorphologyElement.in1	5	12	3	6	18	4	6
SVGFEMorphologyElement.operator	5	12	3	6	18	4	6
SVGFEMorphologyElement.radiusX	5	12	3	6	18	4	6
SVGFEMorphologyElement.radiusY	5	12	3	6	18	4	6
SVGFEMorphologyElement.result	5	12	3	6	18	4	6
SVGFEMorphologyElement.width	5	12	3	6	18	4	6
SVGFEMorphologyElement.x	5	12	3	6	18	4	6
SVGFEMorphologyElement.y	5	12	3	6	18	4	6
SVGFEOffsetElement	5	12	3	6	18	4	6
SVGFEOffsetElement.dx	5	12	3	6	18	4	6
SVGFEOffsetElement.dy	5	12	3	6	18	4	6
SVGFEOffsetElement.height	5	12	3	6	18	4	6
SVGFEOffsetElement.in1	5	12	3	6	18	4	6
SVGFEOffsetElement.result	5	12	3	6	18	4	6
SVGFEOffsetElement.width	5	12	3	6	18	4	6
SVGFEOffsetElement.x	5	12	3	6	18	4	6
SVGFEOffsetElement.y	5	12	3	6	18	4	6
SVGFEPointLightElement	5	12	3	6	18	4	6
SVGFEPointLightElement.x	5	12	3	6	18	4	6
SVGFEPointLightElement.y	5	12	3	6	18	4	6
SVGFEPointLightElement.z	5	12	3	6	18	4	6
SVGFESpecularLightingElement	5	12	3	6	18	4	6
SVGFESpecularLightingElement.height	5	12	3	6	18	4	6
SVGFESpecularLightingElement.in1	5	12	3	6	18	4	6
SVGFESpecularLightingElement.kernelUnitLengthX	45	12	3	17.4	45	4	17.4
SVGFESpecularLightingElement.kernelUnitLengthY	45	12	3	17.4	45	4	17.4
SVGFESpecularLightingElement.result	5	12	3	6	18	4	6
SVGFESpecularLightingElement.specularConstant	5	12	3	6	18	4	6
SVGFESpecularLightingElement.specularExponent	5	12	3	6	18	4	6
SVGFESpecularLightingElement.surfaceScale	5	12	3	6	18	4	6
SVGFESpecularLightingElement.width	5	12	3	6	18	4	6
SVGFESpecularLightingElement.x	5	12	3	6	18	4	6
SVGFESpecularLightingElement.y	5	12	3	6	18	4	6
SVGFESpotLightElement	5	12	3	6	18	4	6
SVGFESpotLightElement.limitingConeAngle	5	12	3	6	18	4	6
SVGFESpotLightElement.pointsAtX	5	12	3	6	18	4	6
SVGFESpotLightElement.pointsAtY	5	12	3	6	18	4	6
SVGFESpotLightElement.pointsAtZ	5	12	3	6	18	4	6
SVGFESpotLightElement.specularExponent	5	12	3	6	18	4	6
SVGFESpotLightElement.x	5	12	3	6	18	4	6
SVGFESpotLightElement.y	5	12	3	6	18	4	6
SVGFESpotLightElement.z	5	12	3	6	18	4	6
SVGFETileElement	5	12	3	6	18	4	6
SVGFETileElement.height	5	12	3	6	18	4	6
SVGFETileElement.in1	5	12	3	6	18	4	6
SVGFETileElement.result	5	12	3	6	18	4	6
SVGFETileElement.width	5	12	3	6	18	4	6
SVGFETileElement.x	5	12	3	6	18	4	6
SVGFETileElement.y	5	12	3	6	18	4	6
SVGFETurbulenceElement	5	12	3	6	18	4	6
SVGFETurbulenceElement.baseFrequencyX	5	12	3	6	18	4	6
SVGFETurbulenceElement.baseFrequencyY	5	12	3	6	18	4	6
SVGFETurbulenceElement.height	5	12	3	6	18	4	6
SVGFETurbulenceElement.numOctaves	5	12	3	6	18	4	6
SVGFETurbulenceElement.result	5	12	3	6	18	4	6
SVGFETurbulenceElement.seed	5	12	3	6	18	4	6
SVGFETurbulenceElement.stitchTiles	5	12	3	6	18	4	6
SVGFETurbulenceElement.type	5	12	3	6	18	4	6
SVGFETurbulenceElement.width	5	12	3	6	18	4	6
SVGFETurbulenceElement.x	5	12	3	6	18	4	6
SVGFETurbulenceElement.y	5	12	3	6	18	4	6
SVGFilterElement	5	12	3	6	18	4	6
SVGFilterElement.filterUnits	5	12	3	6	18	4	6
SVGFilterElement.height	5	12	3	6	18	4	6
SVGFilterElement.href	5	12	3	6	18	4	6
SVGFilterElement.primitiveUnits	5	12	3	6	18	4	6
SVGFilterElement.width	5	12	3	6	18	4	6
SVGFilterElement.x	5	12	3	6	18	4	6
SVGFilterElement.y	5	12	3	6	18	4	6
color-interpolation-filters	1	79	3	3	18	4	2
color-interpolation-filters.auto	1	79	3	3	18	4	2
color-interpolation-filters.linearRGB	28	79	22	9	28	22	9
color-interpolation-filters.sRGB	28	79	22	9	28	22	9
filter.svg_elements	89	89	35	✕	89	35	✕
flood-color	5	12	3	6	18	4	6
flood-color.currentColor	5	12	3	6	18	4	6
flood-color.transparent	5	12	3	6	18	4	6
flood-opacity	5	12	3	6	18	4	6
lighting-color	5	12	3	6	18	4	6
lighting-color.currentColor	5	12	3	6	18	4	6
lighting-color.transparent	5	12	3	6	18	4	6
feBlend	5	12	4	6	18	4	6
feBlend.in	5	12	4	6	18	4	6
feBlend.in2	5	12	4	6	18	4	6
feBlend.mode	5	12	4	6	18	4	6
feColorMatrix	5	12	3	6	18	4	6
feColorMatrix.in	5	12	3	6	18	4	6
feColorMatrix.type	5	12	3	6	18	4	6
feColorMatrix.values	5	12	3	6	18	4	6
feComponentTransfer	5	12	3	6	18	4	6
feComponentTransfer.in	5	12	3	6	18	4	6
feComposite	5	≤18	3	6	18	4	6
feComposite.in	5	≤18	3	6	18	4	6
feComposite.in2	5	≤18	3	6	18	4	6
feComposite.k1	5	79	3	6	18	4	6
feComposite.k2	5	79	3	6	18	4	6
feComposite.k3	5	79	3	6	18	4	6
feComposite.k4	5	79	3	6	18	4	6
feComposite.operator	5	≤18	3	6	18	4	6
feComposite.operator.lighter_value	41	79	86	10	41	86	10
feConvolveMatrix	6	12	3	6	18	4	6
feConvolveMatrix.bias	6	79	3	6	18	4	6
feConvolveMatrix.divisor	6	79	3	6	18	4	6
feConvolveMatrix.edgeMode	6	79	3	6	18	4	6
feConvolveMatrix.in	6	12	3	6	18	4	6
feConvolveMatrix.kernelMatrix	6	12	3	6	18	4	6
feConvolveMatrix.kernelUnitLength	6	79	3	6	18	4	6
feConvolveMatrix.order	6	79	3	6	18	4	6
feConvolveMatrix.preserveAlpha	6	79	3	6	18	4	6
feConvolveMatrix.targetX	6	79	3	6	18	4	6
feConvolveMatrix.targetY	6	79	3	6	18	4	6
feDiffuseLighting	5	12	3	6	18	4	6
feDiffuseLighting.diffuseConstant	5	79	3	6	18	4	6
feDiffuseLighting.in	5	12	3	6	18	4	6
feDiffuseLighting.kernelUnitLength	5	79	3	6	18	4	6
feDiffuseLighting.surfaceScale	5	79	3	6	18	4	6
feDisplacementMap	5	12	3	6	18	4	6
feDisplacementMap.in	5	12	3	6	18	4	6
feDisplacementMap.in2	5	12	3	6	18	4	6
feDisplacementMap.scale	5	12	3	6	18	4	6
feDisplacementMap.xChannelSelector	5	79	3	6	18	4	6
feDisplacementMap.yChannelSelector	5	79	3	6	18	4	6
feDistantLight	5	≤18	3	6	18	4	6
feDistantLight.azimuth	5	79	3	6	18	4	6
feDistantLight.elevation	5	79	3	6	18	4	6
feDropShadow	13	79	30	6	18	30	6
feDropShadow.dx	13	79	30	6	18	30	6
feDropShadow.dy	13	79	30	6	18	30	6
feDropShadow.in	13	79	30	6	18	30	6
feDropShadow.stdDeviation	13	79	30	6	18	30	6
feFlood	5	12	3	6	18	4	6
feFuncA	5	12	3	6	18	4	6
feFuncB	5	12	3	6	18	4	6
feFuncG	5	12	3	6	18	4	6
feFuncR	5	12	3	6	18	4	6
feGaussianBlur	5	≤18	3	6	18	4	6
feGaussianBlur.edgeMode	✕	✕	✕	8	✕	✕	8
feGaussianBlur.in	5	≤18	3	6	18	4	6
feGaussianBlur.stdDeviation	5	≤18	3	6	18	4	6
feImage	5	12	3	6	18	4	6
feImage.crossorigin	✕	✕	114	✕	✕	114	✕
feImage.href	5	12	3	6	18	4	6
feImage.preserveAspectRatio	5	79	22	6	18	22	6
feMerge	5	12	3	6	18	4	6
feMergeNode	5	12	3	6	18	4	6
feMergeNode.in	5	12	4	6	18	4	6
feMorphology	5	12	3	6	18	4	6
feMorphology.in	5	12	3	6	18	4	6
feMorphology.operator	5	12	3	6	18	4	6
feMorphology.radius	5	12	3	6	18	4	6
feOffset	5	12	3	6	18	4	6
feOffset.dx	6	12	3	6	18	4	6
feOffset.dy	6	12	3	6	18	4	6
feOffset.in	6	12	3	6	18	4	6
fePointLight	5	12	3	6	18	4	6
fePointLight.x	5	12	3	6	18	4	6
fePointLight.y	5	12	3	6	18	4	6
fePointLight.z	5	12	3	6	18	4	6
feSpecularLighting	5	12	3	6	18	4	6
feSpecularLighting.in	5	12	3	6	18	4	6
feSpecularLighting.kernelUnitLength	45	79	3	17.4	45	4	17.4
feSpecularLighting.specularConstant	5	12	3	6	18	4	6
feSpecularLighting.specularExponent	5	12	3	6	18	4	6
feSpecularLighting.surfaceScale	5	79	3	6	18	4	6
feSpotLight	5	12	3	6	18	4	6
feSpotLight.limitingConeAngle	5	12	3	6	18	4	6
feSpotLight.pointsAtX	5	12	3	6	18	4	6
feSpotLight.pointsAtY	5	12	3	6	18	4	6
feSpotLight.pointsAtZ	5	12	3	6	18	4	6
feSpotLight.specularExponent	5	12	3	6	18	4	6
feSpotLight.x	5	12	3	6	18	4	6
feSpotLight.y	5	12	3	6	18	4	6
feSpotLight.z	5	12	3	6	18	4	6
feTile	5	12	3	6	18	4	6
feTile.in	5	12	3	6	18	4	6
feTurbulence	5	12	3	6	18	4	6
feTurbulence.baseFrequency	5	12	3	6	18	4	6
feTurbulence.numOctaves	5	79	3	6	18	4	6
feTurbulence.seed	5	12	3	6	18	4	6
feTurbulence.stitchTiles	5	79	3	6	18	4	6
feTurbulence.type	5	79	3	6	18	4	6
filter	5	12	3	6	18	4	6
filter.filterUnits	5	79	3	6	18	4	6
filter.height	5	79	3	6	18	4	6
filter.primitiveUnits	5	79	3	6	18	4	6
filter.width	5	79	3	6	18	4	6
filter.x	5	79	3	6	18	4	6
filter.y	5	79	3	6	18	4	6
svg.global_attributes.filter	≤53	79	35	≤10.1	≤53	35	≤10.3
svg.global_attributes.flood-color	5	12	3	6	18	4	6
svg.global_attributes.flood-opacity	5	12	3	6	18	4	6