Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction blur()

Description de la fonction blur().

La fonction blur() applique un effet de flou gaussien au visuel d'un élément.

La fonction blur() peut être utilisée avec :

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • filter : Filtre graphique.

Syntaxe de la fonction blur().

  • filter: blur(5px); n

    n indique l'importance du flou : plus la valeur est élevée, plus le flou sera important. C'est une valeur numérique positive ou nulle, avec une unité de dimension (voir les unités de dimensions en CSS).

Simulateur.

filter :
( n )
Effet de blur() sur du texte et sur une image

Effet de flou avec blur()

Compatibilité et prise en charge suivant les navigateurs.

A part Internet Explorer et Edge, la plupart des navigateurs traitent correctement les fonctions associées aux filtres graphiques (blur(), greyscale()...).

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Images et filtres - Propriétés.

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
  • filter : Filtre graphique.
  • image-rendering : Mode de mise à l'échelle des images.
  • mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Images et filtres - Fonctions.

  • brightness() : Ajuste la luminosité d'une image.
  • contrast() : Ajuste le contraste d'une image.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • grayscale() : Convertit une image en nuances de gris (noir et blanc).
  • hue-rotate() : Change les couleurs d'une image (rotation des teintes).
  • image() : Désigne ou définit une image.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • invert() : Inverse les couleurs d'une image.
  • opacity() : Détermine le degré de transparence d'un élément.
  • saturate() : Définit la saturation des couleurs d'une image.
  • sepia() : Applique un effet sépia à une image.