BASELINE NowYouCanUse.com
Widely Available SVG

SVG filters

The <filter> SVG element applies custom effects such as color manipulation, blurring, or morphing to SVG elements.
Baseline Status: Achieved Widely Available on Jan 29, 2018 (Cross-browser Newly Available since Jul 29, 2015).
Desktop Browser Engine Support
Google Chrome
5
Supported
Mozilla Firefox
3
Supported
Apple Safari
6
Supported
Microsoft Edge
12
Supported
Mobile Browser Engine Support
Chrome Android
18
Firefox Android
4
Safari iOS
6
Specifications and References
MDN Browser Compat Data Keys:
api.SVGFEBlendElement ↗ api.SVGFEBlendElement.height ↗ api.SVGFEBlendElement.in1 ↗ api.SVGFEBlendElement.in2 ↗ api.SVGFEBlendElement.mode ↗ api.SVGFEBlendElement.result ↗ api.SVGFEBlendElement.width ↗ api.SVGFEBlendElement.x ↗ api.SVGFEBlendElement.y ↗ api.SVGFEColorMatrixElement ↗ api.SVGFEColorMatrixElement.height ↗ api.SVGFEColorMatrixElement.in1 ↗ api.SVGFEColorMatrixElement.result ↗ api.SVGFEColorMatrixElement.type ↗ api.SVGFEColorMatrixElement.values ↗ api.SVGFEColorMatrixElement.width ↗ api.SVGFEColorMatrixElement.x ↗ api.SVGFEColorMatrixElement.y ↗ api.SVGFEComponentTransferElement ↗ api.SVGFEComponentTransferElement.height ↗ api.SVGFEComponentTransferElement.in1 ↗ api.SVGFEComponentTransferElement.result ↗ api.SVGFEComponentTransferElement.width ↗ api.SVGFEComponentTransferElement.x ↗ api.SVGFEComponentTransferElement.y ↗ api.SVGFECompositeElement ↗ api.SVGFECompositeElement.height ↗ api.SVGFECompositeElement.in1 ↗ api.SVGFECompositeElement.in2 ↗ api.SVGFECompositeElement.k1 ↗ api.SVGFECompositeElement.k2 ↗ api.SVGFECompositeElement.k3 ↗ api.SVGFECompositeElement.k4 ↗ api.SVGFECompositeElement.operator ↗ api.SVGFECompositeElement.result ↗ api.SVGFECompositeElement.width ↗ api.SVGFECompositeElement.x ↗ api.SVGFECompositeElement.y ↗ api.SVGFEConvolveMatrixElement ↗ api.SVGFEConvolveMatrixElement.bias ↗ api.SVGFEConvolveMatrixElement.divisor ↗ api.SVGFEConvolveMatrixElement.edgeMode ↗ api.SVGFEConvolveMatrixElement.height ↗ api.SVGFEConvolveMatrixElement.in1 ↗ api.SVGFEConvolveMatrixElement.kernelMatrix ↗ api.SVGFEConvolveMatrixElement.kernelUnitLengthX ↗ api.SVGFEConvolveMatrixElement.kernelUnitLengthY ↗ api.SVGFEConvolveMatrixElement.orderX ↗ api.SVGFEConvolveMatrixElement.orderY ↗ api.SVGFEConvolveMatrixElement.preserveAlpha ↗ api.SVGFEConvolveMatrixElement.result ↗ api.SVGFEConvolveMatrixElement.targetX ↗ api.SVGFEConvolveMatrixElement.targetY ↗ api.SVGFEConvolveMatrixElement.width ↗ api.SVGFEConvolveMatrixElement.x ↗ api.SVGFEConvolveMatrixElement.y ↗ api.SVGFEDiffuseLightingElement ↗ api.SVGFEDiffuseLightingElement.diffuseConstant ↗ api.SVGFEDiffuseLightingElement.height ↗ api.SVGFEDiffuseLightingElement.in1 ↗ api.SVGFEDiffuseLightingElement.kernelUnitLengthX ↗ api.SVGFEDiffuseLightingElement.kernelUnitLengthY ↗ api.SVGFEDiffuseLightingElement.result ↗ api.SVGFEDiffuseLightingElement.surfaceScale ↗ api.SVGFEDiffuseLightingElement.width ↗ api.SVGFEDiffuseLightingElement.x ↗ api.SVGFEDiffuseLightingElement.y ↗ api.SVGFEDisplacementMapElement ↗ api.SVGFEDisplacementMapElement.height ↗ api.SVGFEDisplacementMapElement.in1 ↗ api.SVGFEDisplacementMapElement.in2 ↗ api.SVGFEDisplacementMapElement.result ↗ api.SVGFEDisplacementMapElement.scale ↗ api.SVGFEDisplacementMapElement.width ↗ api.SVGFEDisplacementMapElement.x ↗ api.SVGFEDisplacementMapElement.xChannelSelector ↗ api.SVGFEDisplacementMapElement.y ↗ api.SVGFEDisplacementMapElement.yChannelSelector ↗ api.SVGFEDistantLightElement ↗ api.SVGFEDistantLightElement.azimuth ↗ api.SVGFEDistantLightElement.elevation ↗ api.SVGFEDropShadowElement ↗ api.SVGFEDropShadowElement.dx ↗ api.SVGFEDropShadowElement.dy ↗ api.SVGFEDropShadowElement.height ↗ api.SVGFEDropShadowElement.in1 ↗ api.SVGFEDropShadowElement.result ↗ api.SVGFEDropShadowElement.setStdDeviation ↗ api.SVGFEDropShadowElement.stdDeviationX ↗ api.SVGFEDropShadowElement.stdDeviationY ↗ api.SVGFEDropShadowElement.width ↗ api.SVGFEDropShadowElement.x ↗ api.SVGFEDropShadowElement.y ↗ api.SVGFEFloodElement ↗ api.SVGFEFloodElement.height ↗ api.SVGFEFloodElement.result ↗ api.SVGFEFloodElement.width ↗ api.SVGFEFloodElement.x ↗ api.SVGFEFloodElement.y ↗ api.SVGFEFuncAElement ↗ api.SVGFEFuncBElement ↗ api.SVGFEFuncGElement ↗ api.SVGFEFuncRElement ↗ api.SVGFEGaussianBlurElement ↗ api.SVGFEGaussianBlurElement.edgeMode ↗ api.SVGFEGaussianBlurElement.height ↗ api.SVGFEGaussianBlurElement.in1 ↗ api.SVGFEGaussianBlurElement.result ↗ api.SVGFEGaussianBlurElement.setStdDeviation ↗ api.SVGFEGaussianBlurElement.stdDeviationX ↗ api.SVGFEGaussianBlurElement.stdDeviationY ↗ api.SVGFEGaussianBlurElement.width ↗ api.SVGFEGaussianBlurElement.x ↗ api.SVGFEGaussianBlurElement.y ↗ api.SVGFEImageElement ↗ api.SVGFEImageElement.crossOrigin ↗ api.SVGFEImageElement.height ↗ api.SVGFEImageElement.href ↗ api.SVGFEImageElement.preserveAspectRatio ↗ api.SVGFEImageElement.result ↗ api.SVGFEImageElement.width ↗ api.SVGFEImageElement.x ↗ api.SVGFEImageElement.y ↗ api.SVGFEMergeElement ↗ api.SVGFEMergeElement.height ↗ api.SVGFEMergeElement.result ↗ api.SVGFEMergeElement.width ↗ api.SVGFEMergeElement.x ↗ api.SVGFEMergeElement.y ↗ api.SVGFEMergeNodeElement ↗ api.SVGFEMergeNodeElement.in1 ↗ api.SVGFEMorphologyElement ↗ api.SVGFEMorphologyElement.height ↗ api.SVGFEMorphologyElement.in1 ↗ api.SVGFEMorphologyElement.operator ↗ api.SVGFEMorphologyElement.radiusX ↗ api.SVGFEMorphologyElement.radiusY ↗ api.SVGFEMorphologyElement.result ↗ api.SVGFEMorphologyElement.width ↗ api.SVGFEMorphologyElement.x ↗ api.SVGFEMorphologyElement.y ↗ api.SVGFEOffsetElement ↗ api.SVGFEOffsetElement.dx ↗ api.SVGFEOffsetElement.dy ↗ api.SVGFEOffsetElement.height ↗ api.SVGFEOffsetElement.in1 ↗ api.SVGFEOffsetElement.result ↗ api.SVGFEOffsetElement.width ↗ api.SVGFEOffsetElement.x ↗ api.SVGFEOffsetElement.y ↗ api.SVGFEPointLightElement ↗ api.SVGFEPointLightElement.x ↗ api.SVGFEPointLightElement.y ↗ api.SVGFEPointLightElement.z ↗ api.SVGFESpecularLightingElement ↗ api.SVGFESpecularLightingElement.height ↗ api.SVGFESpecularLightingElement.in1 ↗ api.SVGFESpecularLightingElement.kernelUnitLengthX ↗ api.SVGFESpecularLightingElement.kernelUnitLengthY ↗ api.SVGFESpecularLightingElement.result ↗ api.SVGFESpecularLightingElement.specularConstant ↗ api.SVGFESpecularLightingElement.specularExponent ↗ api.SVGFESpecularLightingElement.surfaceScale ↗ api.SVGFESpecularLightingElement.width ↗ api.SVGFESpecularLightingElement.x ↗ api.SVGFESpecularLightingElement.y ↗ api.SVGFESpotLightElement ↗ api.SVGFESpotLightElement.limitingConeAngle ↗ api.SVGFESpotLightElement.pointsAtX ↗ api.SVGFESpotLightElement.pointsAtY ↗ api.SVGFESpotLightElement.pointsAtZ ↗ api.SVGFESpotLightElement.specularExponent ↗ api.SVGFESpotLightElement.x ↗ api.SVGFESpotLightElement.y ↗ api.SVGFESpotLightElement.z ↗ api.SVGFETileElement ↗ api.SVGFETileElement.height ↗ api.SVGFETileElement.in1 ↗ api.SVGFETileElement.result ↗ api.SVGFETileElement.width ↗ api.SVGFETileElement.x ↗ api.SVGFETileElement.y ↗ api.SVGFETurbulenceElement ↗ api.SVGFETurbulenceElement.baseFrequencyX ↗ api.SVGFETurbulenceElement.baseFrequencyY ↗ api.SVGFETurbulenceElement.height ↗ api.SVGFETurbulenceElement.numOctaves ↗ api.SVGFETurbulenceElement.result ↗ api.SVGFETurbulenceElement.seed ↗ api.SVGFETurbulenceElement.stitchTiles ↗ api.SVGFETurbulenceElement.type ↗ api.SVGFETurbulenceElement.width ↗ api.SVGFETurbulenceElement.x ↗ api.SVGFETurbulenceElement.y ↗ api.SVGFilterElement ↗ api.SVGFilterElement.filterUnits ↗ api.SVGFilterElement.height ↗ api.SVGFilterElement.href ↗ api.SVGFilterElement.primitiveUnits ↗ api.SVGFilterElement.width ↗ api.SVGFilterElement.x ↗ api.SVGFilterElement.y ↗ css.properties.color-interpolation-filters ↗ css.properties.color-interpolation-filters.auto ↗ css.properties.color-interpolation-filters.linearRGB ↗ css.properties.color-interpolation-filters.sRGB ↗ css.properties.filter.svg_elements ↗ css.properties.flood-color ↗ css.properties.flood-color.currentColor ↗ css.properties.flood-color.transparent ↗ css.properties.flood-opacity ↗ css.properties.lighting-color ↗ css.properties.lighting-color.currentColor ↗ css.properties.lighting-color.transparent ↗ svg.elements.feBlend ↗ svg.elements.feBlend.in ↗ svg.elements.feBlend.in2 ↗ svg.elements.feBlend.mode ↗ svg.elements.feColorMatrix ↗ svg.elements.feColorMatrix.in ↗ svg.elements.feColorMatrix.type ↗ svg.elements.feColorMatrix.values ↗ svg.elements.feComponentTransfer ↗ svg.elements.feComponentTransfer.in ↗ svg.elements.feComposite ↗ svg.elements.feComposite.in ↗ svg.elements.feComposite.in2 ↗ svg.elements.feComposite.k1 ↗ svg.elements.feComposite.k2 ↗ svg.elements.feComposite.k3 ↗ svg.elements.feComposite.k4 ↗ svg.elements.feComposite.operator ↗ svg.elements.feComposite.operator.lighter_value ↗ svg.elements.feConvolveMatrix ↗ svg.elements.feConvolveMatrix.bias ↗ svg.elements.feConvolveMatrix.divisor ↗ svg.elements.feConvolveMatrix.edgeMode ↗ svg.elements.feConvolveMatrix.in ↗ svg.elements.feConvolveMatrix.kernelMatrix ↗ svg.elements.feConvolveMatrix.kernelUnitLength ↗ svg.elements.feConvolveMatrix.order ↗ svg.elements.feConvolveMatrix.preserveAlpha ↗ svg.elements.feConvolveMatrix.targetX ↗ svg.elements.feConvolveMatrix.targetY ↗ svg.elements.feDiffuseLighting ↗ svg.elements.feDiffuseLighting.diffuseConstant ↗ svg.elements.feDiffuseLighting.in ↗ svg.elements.feDiffuseLighting.kernelUnitLength ↗ svg.elements.feDiffuseLighting.surfaceScale ↗ svg.elements.feDisplacementMap ↗ svg.elements.feDisplacementMap.in ↗ svg.elements.feDisplacementMap.in2 ↗ svg.elements.feDisplacementMap.scale ↗ svg.elements.feDisplacementMap.xChannelSelector ↗ svg.elements.feDisplacementMap.yChannelSelector ↗ svg.elements.feDistantLight ↗ svg.elements.feDistantLight.azimuth ↗ svg.elements.feDistantLight.elevation ↗ svg.elements.feDropShadow ↗ svg.elements.feDropShadow.dx ↗ svg.elements.feDropShadow.dy ↗ svg.elements.feDropShadow.in ↗ svg.elements.feDropShadow.stdDeviation ↗ svg.elements.feFlood ↗ svg.elements.feFuncA ↗ svg.elements.feFuncB ↗ svg.elements.feFuncG ↗ svg.elements.feFuncR ↗ svg.elements.feGaussianBlur ↗ svg.elements.feGaussianBlur.edgeMode ↗ svg.elements.feGaussianBlur.in ↗ svg.elements.feGaussianBlur.stdDeviation ↗ svg.elements.feImage ↗ svg.elements.feImage.crossorigin ↗ svg.elements.feImage.href ↗ svg.elements.feImage.preserveAspectRatio ↗ svg.elements.feMerge ↗ svg.elements.feMergeNode ↗ svg.elements.feMergeNode.in ↗ svg.elements.feMorphology ↗ svg.elements.feMorphology.in ↗ svg.elements.feMorphology.operator ↗ svg.elements.feMorphology.radius ↗ svg.elements.feOffset ↗ svg.elements.feOffset.dx ↗ svg.elements.feOffset.dy ↗ svg.elements.feOffset.in ↗ svg.elements.fePointLight ↗ svg.elements.fePointLight.x ↗ svg.elements.fePointLight.y ↗ svg.elements.fePointLight.z ↗ svg.elements.feSpecularLighting ↗ svg.elements.feSpecularLighting.in ↗ svg.elements.feSpecularLighting.kernelUnitLength ↗ svg.elements.feSpecularLighting.specularConstant ↗ svg.elements.feSpecularLighting.specularExponent ↗ svg.elements.feSpecularLighting.surfaceScale ↗ svg.elements.feSpotLight ↗ svg.elements.feSpotLight.limitingConeAngle ↗ svg.elements.feSpotLight.pointsAtX ↗ svg.elements.feSpotLight.pointsAtY ↗ svg.elements.feSpotLight.pointsAtZ ↗ svg.elements.feSpotLight.specularExponent ↗ svg.elements.feSpotLight.x ↗ svg.elements.feSpotLight.y ↗ svg.elements.feSpotLight.z ↗ svg.elements.feTile ↗ svg.elements.feTile.in ↗ svg.elements.feTurbulence ↗ svg.elements.feTurbulence.baseFrequency ↗ svg.elements.feTurbulence.numOctaves ↗ svg.elements.feTurbulence.seed ↗ svg.elements.feTurbulence.stitchTiles ↗ svg.elements.feTurbulence.type ↗ svg.elements.filter ↗ svg.elements.filter.filterUnits ↗ svg.elements.filter.height ↗ svg.elements.filter.primitiveUnits ↗ svg.elements.filter.width ↗ svg.elements.filter.x ↗ svg.elements.filter.y ↗ svg.global_attributes.filter ↗ svg.global_attributes.flood-color ↗ svg.global_attributes.flood-opacity ↗
id: svg-filters