blur()

Baseline Widely available

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.

Lafonction CSSblur() permet d'appliquerun 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>  <img          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 de0 laisse l'entrée inchangée. La valeur initiale pour l'interpolation est0. Les valeurs en pourcentage ne sont pas valides. La valeur par défaut est0.

L'élément de filtre SVG<feGaussianBlur> peut aussi être utilisé pour flouter un contenu. L'attributstdDeviation 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 pourstdDeviation. Cet effet SVG peut ensuite être référencé par son identifiant :

html

<svg role="none">  <filter>    <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 filtreblur() 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>    <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                   src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"          alt="Pride flag" />      </td>      <td>        <svg height="220" width="220" overflow="visible">          <filter>            <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>