---
title: <feGaussianBlur>
slug: Web/SVG/Element/feGaussianBlur
translation_of: Web/SVG/Element/feGaussianBlur
---
{{SVGRef}}

La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feGaussianBlur>`** applique un effet de flou à l'image en entrée. La quantité de flou est contrôlée par {{SVGAttr("stdDeviation")}}.

## Contexte d'utilisation

{{svginfo}}

## Attributs

### Attributs globaux

- [Attributs de base](/fr/docs/Web/SVG/Attribute#attributs_de_base)
- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#attributs_de_présentation)
- [Attributs de primitives de filtres](/fr/docs/Web/SVG/Attribute#attributs_de_primitives_de_filtre)
- {{SVGAttr("class")}}
- {{SVGAttr("style")}}

### Attributs spécifiques

- {{SVGAttr("in")}}
- {{SVGAttr("stdDeviation")}}
- {{SVGAttr("edgeMode")}}

## Interface DOM

Cet élément implémente l'interface {{domxref("SVGFEGaussianBlurElement")}}.

## Exemple

### Exemple simple

#### SVG

```html
<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>
```

#### Résultat

{{EmbedLiveSample("Exemple_simple",232,124)}}

### Exemple avec une ombre portée

#### SVG

```html
<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>
```

#### Résultat

{{EmbedLiveSample("Exemple_avec_une_ombre_portée",125,124)}}

## Spécifications

| Spécification                                                                                                        | Statut                           | Commentaire                                        |
| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------- |
| {{SpecName('Filters 1.0', '#feGaussianBlurElement', '&lt;feGaussianBlur&gt;')}}             | {{Spec2('Filters 1.0')}} | Ajoute l'attribut {{SVGAttr("edgeMode")}} |
| {{SpecName('SVG1.1', 'filters.html#feGaussianBlurElement', '&lt;feGaussianBlur&gt;')}} | {{Spec2('SVG1.1')}}         | Définition initiale                                |

## Compatibilité des navigateurs

{{Compat("svg.elements.feGaussianBlur")}}

## Voir aussi

- {{SVGElement("filter")}}
- {{SVGElement("feBlend")}}
- {{SVGElement("feColorMatrix")}}
- {{SVGElement("feComponentTransfer")}}
- {{SVGElement("feComposite")}}
- {{SVGElement("feConvolveMatrix")}}
- {{SVGElement("feDiffuseLighting")}}
- {{SVGElement("feDisplacementMap")}}
- {{SVGElement("feFlood")}}
- {{SVGElement("feImage")}}
- {{SVGElement("feMerge")}}
- {{SVGElement("feMorphology")}}
- {{SVGElement("feOffset")}}
- {{SVGElement("feSpecularLighting")}}
- {{SVGElement("feTile")}}
- {{SVGElement("feTurbulence")}}
- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutorial/Filter_effects)