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
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 est0
. Les valeurs en pourcentage ne sont pas valides. La valeur par défaut est0
.
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 :
<svg role="none">
<filter id="blur11">
<feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
</filter>
</svg>
Les déclarations suivantes produisent le même effet :
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
<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
.filter {
filter: blur(3.5px);
}
Résultat
Spécifications
Specification |
---|
Filter Effects Module Level 1> # funcdef-filter-blur> |
Compatibilité des navigateurs
Loading…
Voir aussi
- Le module des effets de filtre CSS
- Les autres fonctions de
<filter-function>
disponibles pour être utilisées dans les valeurs des propriétésfilter
etbackdrop-filter
incluent :