Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

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.

Filtre SVG

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);
}

Résultat

Spécifications

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

Compatibilité des navigateurs

Voir aussi