Fonction blur CSS

Définition et utilisation

Fonction blur CSS blur() La fonction de filtre applique un effet de flou à l'élément. Plus la valeur est grande, plus l'effet de flou est fort.

Si aucune valeur n'est spécifiée, la valeur par défaut est utilisée 0.

Exemple

Exemple 1

Appliquer des effets de flou différents aux éléments <h1> et <img> :

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

Essayer par vous-même

Exemple 2

Créer un arrière-plan flou :

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

Essayer par vous-même

Syntaxe CSS

blur(radius)

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement la fonction pour la première fois.

Pages associées

Référence :Propriété filter de CSS

Référence :Fonction brightness() CSS

Référence :Fonction contrast() CSS

Référence :Fonction drop-shadow() CSS

Référence :Fonction grayscale() CSS

Référence :Fonction hue-rotate() CSS

Référence :Fonction invert() CSS

Référence :Fonction opacity() CSS

Référence :Fonction saturate() CSS

Référence :Fonction sepia() CSS