Blur() - Fonction CSS

blur()

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

Description rapide
blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Module W3C
Module filtres et effets
Références (W3C)
Statut du document: WD (document de travail)

Schéma syntaxique de blur().

blur() - Syntax DiagramSyntax diagram of the blur() CSS function. See stylescss.free.fr for details. length* length*blur()blur()
Schéma syntaxique de la fonction blur().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

  • length est une valeur numérique positive ou nulle, suivie d'une des unités de dimension absolue.
    L'étoile indique que la valeur peut être omise, dans cd cas, elle est prise égale à 0.

Description de la fonction blur().

La fonction blur() applique un effet de flou gaussien au visuel d'un élément. Le flou sera appliqué aussi bien sur l'arrière-plan que sur le contenu de l'élément, et ce quelque soit ce contenu : image, texte, vidéo, etc.

Exemple avec la fonction blur()

Exemple

La valeur blur() peut être utilisée avec les propriétés suivantes :

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

Syntaxes 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 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 la fonction 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

Animation avec la fonction blur().

Voila un petit effet visuel qui incite à la lecture d'un texte. Chacun des mots est dans une balise span. Une même animation est appliquée sur ces éléments mais avec un temps de retard de plus en plus important.

Effet de défilement avec blur()

Simulateur avec la fonction blur().

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

Support de la fonction blur().

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
Capacité à appliquer un filtre sur un élément, avec la propriété filter.
Colonne 2
Support de la fonction blur() pour appliquer un effet de flou sur un élément.
1
Filtres
graphiques
2
Fonction
blur()
Estimation de la prise en charge globale.
96%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra

Safari

Firefox

Chrome pour Androïd

Chrome

Edge

Androïd Brower

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la fonction blur().

  • Module effets et filtres - Niveau 1

    Concernant blur(). Première version du module CSS définissant les filtres graphiques, y compris la fonction blur().
    WD
    25 Octobre 2012
    Document de travail.
    CR
    PR
    REC

Voir aussi : autres effets et filtres graphiques.

Les effets graphiques disponibles en CSS sont de plus en plus nombreux. Ils sont décrits dans la spécification "module filtres et effets" (module filtres et effets).

Propriétés :

backdrop-filter
Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
color-interpolation
Définit l'espace de couleurs à utiliser pour calculer les dégradés, les animations et les combinaisons avec la couche alpha.
color-interpolation-filters
Définit dans quel espace de couleurs sont calculés les effets de filtrage. Par défaut cet espace est le linearRGB
filter
Applique un filtre graphique (flou, contraste, luminosité...) à un élément.
flood-color
Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.
flood-opacity
Définit l'opacité des remplissages et des ombrages dans le contexte de filtres SVG.
lighting-color
Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.

Fonctions :

Blur()
blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.
brightness()
Ajuste la luminosité d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
contrast()
Ajuste le contraste d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
drop-shadow()
Définit l'ombre d'un élément : dimensions, flou, couleur, etc. C'est un filtre graphique qui s'utiilise avec la propriété filter.
grayscale()
Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.
hue-rotate()
Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).
invert()
Inverse les couleurs d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec le propriété filter.
opacity()
Détermine le degré de transparence d'un élément. C'est un filtre graphique qui s'utilise avec la propriété filter.
saturate()
Définit la saturation des couleurs d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
sepia()
Applique un effet sépia à une image ou un élément quelconque. C'est un (filtre graphique qui s'utilise avec la propriété filter.