The <feGaussianBlur>
SVG filter primitive blurs the input image by the amount specified in stdDeviation
, which defines the bell-curve.
Usage context
Categories | Filter primitive element |
---|---|
Permitted content | Any number of the following elements, in any order:<animate> , <set> |
Attributes
Global attributes
Specific attributes
DOM Interface
This element implements the SVGFEGaussianBlurElement
interface.
Example
Simple example
SVG
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blurMe"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" /> </svg>
Result
Screenshot | Live sample |
---|---|
Drop shadow example
SVG
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="dropShadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> <feOffset dx="2" dy="4" /> <feMerge> <feMergeNode /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropShadow)" /> </svg>
Result
Screenshot | Live sample |
---|---|
Specifications
Specification | Status | Comment |
---|---|---|
Filter Effects Module Level 1 The definition of '<feGaussianBlur>' in that specification. |
Working Draft | Added edgeMode attribute |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<feGaussianBlur>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
feGaussianBlur | Chrome ? | Edge Full support ≤18 | Firefox Full support 4 | IE ? | Opera Full support 9 | Safari Full support 9.1 | WebView Android ? | Chrome Android ? | Firefox Android Full support Yes | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
edgeMode | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
in | Chrome ? | Edge Full support ≤18 | Firefox Full support 4 | IE ? | Opera Full support 9 | Safari Full support 9.1 | WebView Android ? | Chrome Android ? | Firefox Android Full support Yes | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
stdDeviation | Chrome ? | Edge Full support ≤18 | Firefox Full support 4 | IE ? | Opera Full support 9 | Safari Full support 9.1 | WebView Android ? | Chrome Android ? | Firefox Android Full support Yes | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown