blur()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨septembre 2016⁩.

La fonction CSS blur() permet d'appliquer un flou gaussien sur l'image d'entrée. Le résultat de cette fonction est une valeur <filter-function>.

Exemple interactif

filter: blur(0);

filter: blur(4px);

filter: blur(1.5rem);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntaxe

css

blur()         /* Aucun effet */
blur(0)        /* Aucun effet */

blur(8px)      /* Flou avec un rayon de 8px */
blur(1.17rem)  /* Flou avec un rayon de 1.17rem */

Paramètres

<length> Facultatif: Définit le rayon du flou. Il correspond à la valeur de l'écart-type de la fonction gaussienne, c'est-à-dire le nombre de pixels de l'écran qui se mélangent entre eux. Plus la valeur est grande, plus le flou sera prononcé. Une valeur de 0 laisse l'entrée inchangée. La valeur initiale pour l'interpolation est 0. Les valeurs en pourcentage ne sont pas valides. La valeur par défaut est 0.

L'élément de filtre SVG <feGaussianBlur> peut aussi être utilisé pour flouter un contenu. L'attribut stdDeviation du filtre accepte jusqu'à deux valeurs, ce qui permet de créer des flous plus complexes. Pour obtenir un flou équivalent, il suffit d'indiquer une seule valeur pour stdDeviation. Cet effet SVG peut ensuite être référencé par son identifiant :

html

<svg role="none">
  <filter id="blur11">
    <feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
  </filter>
</svg>

Les déclarations suivantes produisent le même effet :

css

filter: blur(1.1px);
filter: url("#blur11"); /* avec SVG intégré */
filter: url("folder/fileName.svg#blur11"); /* définition de filtre svg externe */

Syntaxe formelle

<blur()> = 
  blur( <length>? )

Exemples

Cet exemple montre trois images : l'image avec une fonction de filtre blur() appliquée, l'image avec la fonction de flou SVG équivalente appliquée, et les images originales pour comparaison :

HTML

html

<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url('#blur')" />
</svg>

CSS

css

.filter {
  filter: blur(3.5px);
}

svg:not([height]) {
  display: none;
}

<table cellpadding="5">
  <thead>
    <tr>
      <th>Exemple en direct</th>
      <th>Équivalent SVG</th>
      <th>Image d'origine</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <svg id="svg" height="220" width="220" overflow="visible">
          <filter id="svgBlur">
            <feGaussianBlur stdDeviation="3.5" />
          </filter>
          <image
            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            filter="url('#svgBlur')" />
        </svg>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Résultat

Spécifications

Specification
Filter Effects Module Level 1 # funcdef-filter-blur

Compatibilité des navigateurs

Voir aussi

Le module des effets de filtre CSS
Les autres fonctions de <filter-function> disponibles pour être utilisées dans les valeurs des propriétés filter et backdrop-filter incluent :

Help improve MDN

Learn how to contribute

This page was last modified on ⁨14 oct. 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content