<feGaussianBlur>
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
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
| Basic support |
? |
Yes |
4 |
? |
9 |
9.1 |
edgeMode |
? |
? |
? |
? |
? |
? |
in |
? |
Yes |
4 |
? |
9 |
9.1 |
stdDeviation |
? |
Yes |
4 |
? |
9 |
9.1 |
|
Mobile |
|
Android webview |
Chrome for Android |
Edge Mobile |
Firefox for Android |
Opera for Android |
iOS Safari |
Samsung Internet |
| Basic support |
? |
? |
Yes |
Yes |
? |
? |
? |
edgeMode |
? |
? |
? |
? |
? |
? |
? |
in |
? |
? |
Yes |
Yes |
? |
? |
? |
stdDeviation |
? |
? |
Yes |
Yes |
? |
? |
? |
See also