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 :

blur() - Fonction CSS

blur()

Résumé des caractéristiques de la fonction blur()

Description rapide
Applique un effet de flou.
Statut
Standard
Pourcentages
Non autorisés.
Module W3C
Module filtres et effets
Références (W3C)
Statut du document:: WD (document de travail)

Description de la fonction blur().

La fonction blur() applique un effet de flou gaussien au visuel d'un élément. Le flou sera appliqué quelque soit le contenu de l'élément : image, texte, vidéo, etc.

Exemple avec la fonction blur()

Exemple

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

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • filter : Applique un filtre graphique (flou, contraste...) à un élément.

Syntaxe de la fonction blur().

  • filter: blur(5px); n

    La valeur 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 CSS de dimension).
    Les valeurs négatives et les pourcentages ne sont pas autorisés.

    Si aucune valeur n'est indiquée, la valeur par défaut est 0.

Exemples d'utilisation de blur().

Flouter un arrière-plan sans modifier le premier plan.

Lorsqu'un flou est appliqué sur un élément, il concerne également tous les éléments enfants. Dans notre exemple ci-dessous, l'élément contenant le texte (qui doit rester net) ne peut donc pas être un enfant de l'élément contenant l'image (qui doit être floutée). Le texte devrait donc s'afficher en dessous de l'image, mais il a été repositionné pour superposer à l'image (position:relative;).

Remarque : la propriété backdrop-filter permet d'obtenir un résultat comparable, mais la zone de flou sera limitée à la surface de l'élément au premier plan.

Ce texte est net
sur un arrière-plan flou

Flouter un visage.

Le seul moyen de vraiment flouter un visage est de le faire sur l'image elle-même. Cette solution n'est proposée ici que pour servir d'exemple. Elle est facilement contournable.

Il faut positionner un élément sur le visage de façon manuelle : position:relative et ajuster les valeurs des propriétés left et top (il n'y a pas encore de sélecteur en CSS pour sélectionner automatiquement les visages).

 
Exemple d'utilisation de blur() pour flouter un visage

Simulateur : la fonction blur() utilisée avec filter et backdrop-filter.

Utilisée avec filter la fonction blur() floute l'élément, quelque soit sa nature (texte, image...).
Avec backdrop-filter la fonction blur() peut améliorer la lisibilité en floutant l'arrière-plan.

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

Effet de flou avec blur()
Utilisation de blur()
pour estomper l'arrière-plan

Compatibilité et prise en charge suivant les navigateurs.

A part Internet Explorer, qui avait adopté une syntaxe différente,la plupart des navigateurs traitent correctement les fonctions associées aux filtres graphiques dont blur() fait partie.

Colonne 1
Prise en charge générale des filtres graphiques.
Colonne 2
Prise en charge de la fonction blur().
1
Graphic filters
2
blur()
Estimation de la prise en charge en pourcentage du parc actuel.
98%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que blur().

Les spécifications CSS éditées par le W3C sont organisées en modules. blur() fait partie du Module filtres et effets (Filter Effects Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Applique un filtre graphique sur l'élément situé en arrière plan.
Définit dans quel espace de couleurs sont calculés les effets de filtrage.
Applique un filtre graphique (flou, contraste...) à un élément.

Fonctions.

Ajuste la luminosité d'un élément.
Ajuste le contraste d'une image.
Définit l'ombre d'un élément (dimensions, flou, couleur).
Convertit une image en nuances de gris (noir et blanc).
Change les couleurs d'une image (rotation des teintes).
Inverse les couleurs d'une image.
Détermine le degré de transparence d'un élément.
Définit la saturation des couleurs d'une image.
Applique un effet sépia à une image.