Fonction CSS `blur()`

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2016.

En savoir plus
Voir la compatibilit complte

La fonction CSS blur() permet d'appliquer un flou gaussien sur l'image d'entre. Le rsultat 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 */

Paramtres

<length> Facultatif: Dfinit 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 mlangent entre eux. Plus la valeur est grande, plus le flou est prononc. Une valeur de 0 laisse l'entre inchange. La valeur initiale pour l'interpolation est 0. Les valeurs en pourcentage ne sont pas valides. La valeur par dfaut est 0.

L'lment 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 crer des flous plus complexes. Pour obtenir un flou quivalent, il suffit d'indiquer une seule valeur pour stdDeviation. Cet effet SVG peut ensuite tre rfrenc par son identifiant :

html

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

Les dclarations suivantes produisent le mme effet :

css

filter: blur(1.1px);
filter: url("#blur11"); /* avec SVG intgr */
filter: url("folder/fileName.svg#blur11"); /* dfinition de filtre svg externe */

Syntaxe formelle

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

Cette syntaxe reflte le dernier standard selon Filter Effects Module Level 1. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Cet exemple montre trois images : l'image avec une fonction de filtre blur() applique, l'image avec la fonction de flou SVG quivalente applique, 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>

Rsultat

Spcifications

Spcification
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 utilises dans les valeurs des proprits filter et backdrop-filter incluent :

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 7 mai 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu

Fonction CSS blur()

Dans cet article

Aider amliorer MDN

Fonction CSS `blur()`