Docs CSS exécutables : Flou CSS (blur)

Q: Comment flouter un élément en CSS ?

Utilisez filter: blur(5px);. La longueur est le rayon du flou : 0 est net et les valeurs plus grandes sont plus floues. Cela floute l'élément et tout ce qu'il contient, texte et images compris.

Q: Comment flouter le fond derrière un élément ?

Utilisez backdrop-filter: blur(10px); sur l'élément, avec un fond partiellement transparent comme rgb(255 255 255 / 0.5). Le contenu de l'élément reste net et ce qui se trouve derrière est flouté : c'est l'effet verre dépoli.

Q: Quelle est la différence entre drop-shadow() et box-shadow ?

box-shadow suit toujours la boîte rectangulaire de l'élément. filter: drop-shadow() suit la forme visible, y compris les zones transparentes d'un PNG ou d'un SVG, si bien que l'ombre d'une icône a le contour de l'icône.

Q: Comment mettre une image en noir et blanc en CSS ?

Utilisez filter: grayscale(100%); (ou grayscale(1)). Ajoutez une transition et filter: grayscale(0) au survol pour faire revenir la couleur.

Q: Peut-on utiliser plusieurs filtres à la fois ?

Oui, listez-les séparés par des espaces : filter: grayscale(1) brightness(1.2) blur(1px);. Ils sont appliqués dans l'ordre, donc l'ordre peut changer le résultat. Une seconde déclaration filter remplace la première.

Flouter un élément

filter: blur() prend une longueur, le rayon du flou. Plus il est grand, plus l'élément est flou :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS blur</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; }
    img { display: block; width: 160px; height: 100px; }
    .b2 { filter: blur(2px); }
    .b6 { filter: blur(6px); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun"><figcaption>no filter</figcaption></figure>
    <figure><img class="b2" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, slightly blurred"><figcaption>blur(2px)</figcaption></figure>
    <figure><img class="b6" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E" alt="Hills and a sun, very blurred"><figcaption>blur(6px)</figcaption></figure>
  </div>
</body>
</html>

filter fonctionne sur n'importe quel élément, pas seulement les images : une div floutée floute aussi son texte, sa bordure et ses enfants. Remarquez les bords doux des images floutées : le flou étale l'image vers l'extérieur et la mélange avec la zone transparente qui l'entoure. La solution se trouve plus bas, dans « Le problème des bords flous ».

Flouter le fond : backdrop-filter

Pour flouter ce qui se trouve derrière un élément (un panneau en verre dépoli sur une photo ou une page), utilisez backdrop-filter. Le contenu de l'élément reste net. Il faut un fond transparent pour voir le flou :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>backdrop-filter</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .scene {
      position: relative;
      height: 200px;
      background:
        radial-gradient(circle at 25% 40%, #f59e0b 0 40px, transparent 41px),
        radial-gradient(circle at 70% 60%, #16a34a 0 55px, transparent 56px),
        repeating-linear-gradient(90deg, #2563eb 0 16px, #93c5fd 16px 32px);
    }
    .glass {
      position: absolute;
      inset: 40px 60px;
      display: grid;
      place-items: center;
      background: rgb(255 255 255 / 0.35);
      -webkit-backdrop-filter: blur(12px); /* older Safari */
      backdrop-filter: blur(12px);
      border: 1px solid rgb(255 255 255 / 0.6);
      border-radius: 12px;
      color: #111827;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="scene"><div class="glass">Sharp text on frosted glass</div></div>
</body>
</html>

Les rayures et les cercles sont nets autour du panneau et flous derrière lui, tandis que le texte du panneau n'est pas touché. Gardez le texte lisible : une teinte plus claire ou plus foncée dans la couleur de fond aide sur les images chargées.

Toutes les fonctions de filtre, en direct

Déplacez n'importe quel curseur. La ligne sous l'image est la valeur filter exacte, prête à copier :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .controls { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 18px; }
    .controls input { vertical-align: middle; }
    #img { display: block; width: 220px; height: 138px; margin: 12px 0 8px; }
    code { display: block; background: #f3f4f6; padding: 6px; }
  </style>
</head>
<body>
  <div class="controls" id="controls"></div>
  <img id="img" alt="Hills and a sun" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Crect width='160' height='100' fill='%2393c5fd'/%3E%3Ccircle cx='120' cy='30' r='16' fill='%23f59e0b'/%3E%3Cpath d='M0 100 L0 70 Q40 40 80 70 T160 60 L160 100Z' fill='%2316a34a'/%3E%3C/svg%3E">
  <code id="out"></code>
  <script>
    // name, min, max, step, default (the value that changes nothing), unit
    const fns = [
      ['blur', 0, 10, 0.5, 0, 'px'], ['brightness', 0, 2, 0.05, 1, ''],
      ['contrast', 0, 2, 0.05, 1, ''], ['grayscale', 0, 1, 0.05, 0, ''],
      ['sepia', 0, 1, 0.05, 0, ''], ['saturate', 0, 3, 0.1, 1, ''],
      ['hue-rotate', 0, 360, 5, 0, 'deg'], ['invert', 0, 1, 0.05, 0, '']
    ];
    const controls = document.getElementById('controls');
    fns.forEach(([name, min, max, step, def]) => {
      controls.insertAdjacentHTML('beforeend', '<label>' + name + ' <input type="range" data-name="' + name + '" min="' + min + '" max="' + max + '" step="' + step + '" value="' + def + '"></label>');
    });
    const update = () => {
      const parts = fns.filter(([name, , , , def]) => Number(controls.querySelector('[data-name="' + name + '"]').value) !== def)
        .map(([name, , , , , unit]) => name + '(' + controls.querySelector('[data-name="' + name + '"]').value + unit + ')');
      const value = parts.join(' ') || 'none';
      document.getElementById('img').style.filter = value;
      document.getElementById('out').textContent = 'filter: ' + value + ';';
    };
    controls.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Seules les fonctions que vous avez éloignées de leur valeur neutre sont écrites, ce qui garde la valeur courte. brightness(1) ou blur(0px) ne changent rien, il n'y a donc aucune raison de les lister.

Les fonctions de filtre

Fonction	Valeur neutre	Effet	Exemple
`blur(r)`	`0`	flou gaussien de rayon r	`blur(4px)`
`brightness(n)`	`1`	plus sombre sous 1, plus lumineux au-dessus	`brightness(0.7)`
`contrast(n)`	`1`	plus terne sous 1, plus contrasté au-dessus	`contrast(1.3)`
`grayscale(n)`	`0`	1 (ou 100%) est entièrement gris	`grayscale(100%)`
`sepia(n)`	`0`	ton brun chaud	`sepia(0.6)`
`saturate(n)`	`1`	0 est gris, au-dessus de 1 plus vif	`saturate(1.5)`
`hue-rotate(a)`	`0deg`	décale chaque teinte sur le cercle chromatique	`hue-rotate(90deg)`
`invert(n)`	`0`	1 donne un négatif complet des couleurs	`invert(1)`
`opacity(n)`	`1`	comme la propriété `opacity`	`opacity(0.5)`
`drop-shadow(x y blur color)`		une ombre qui suit la forme	`drop-shadow(2px 4px 6px rgb(0 0 0 / 0.3))`

Les nombres peuvent aussi être des pourcentages (grayscale(100%) équivaut à grayscale(1)). Plusieurs fonctions se placent dans une seule valeur, séparées par des espaces, et sont appliquées dans l'ordre : filter: grayscale(1) sepia(1) donne une teinte brune, alors que sepia(1) grayscale(1) finit en simple gris.

drop-shadow suit la forme

box-shadow est toujours un rectangle (aux coins arrondis tout au plus). drop-shadow() est dessinée à partir des pixels visibles, si bien qu'une icône transparente reçoit une ombre au contour de l'icône :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>drop-shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 40px; padding: 10px 20px; }
    img { width: 90px; height: 90px; display: block; }
    .box-shadow { box-shadow: 6px 6px 8px rgb(0 0 0 / 0.4); }
    .drop-shadow { filter: drop-shadow(6px 6px 4px rgb(0 0 0 / 0.4)); }
  </style>
</head>
<body>
  <div class="row">
    <figure><img class="box-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>box-shadow</figcaption></figure>
    <figure><img class="drop-shadow" alt="Star" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59e0b' d='M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z'/%3E%3C/svg%3E"><figcaption>drop-shadow()</figcaption></figure>
  </div>
</body>
</html>

La première étoile projette une ombre carrée depuis sa boîte invisible. La seconde en projette une en forme d'étoile. Contrairement à box-shadow, drop-shadow() n'a ni valeur de diffusion ni inset ; la page box-shadow traite de ces options.

Le problème des bords flous

Une image floutée s'estompe sur ses bords, car le flou y attire les pixels transparents qui l'entourent. Pour garder un bord net (pour un fond de bannière flouté, par exemple), placez l'image dans un conteneur en overflow: hidden et agrandissez légèrement l'image pour couper le bord doux :

.hero { overflow: hidden; }
.hero img { filter: blur(8px); transform: scale(1.1); }

Effets de survol avec filter

filter peut être animé par une transition : un mur de logos qui passent du gris à la couleur, ou une carte atténuée jusqu'au survol, tiennent en deux règles :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Filter on hover</title>
  <style>
    .logo {
      width: 120px;
      height: 70px;
      display: inline-block;
      background: linear-gradient(135deg, #2563eb, #16a34a);
      border-radius: 8px;
      filter: grayscale(1) opacity(0.6);
      transition: filter 0.3s ease;
    }
    .logo:hover, .logo:focus-visible { filter: none; }
  </style>
</head>
<body>
  <a class="logo" href="#" aria-label="Partner one"></a>
  <a class="logo" href="#" aria-label="Partner two"></a>
</body>
</html>

Survolez une tuile (ou atteignez-la avec Tab) et sa couleur apparaît en fondu.

Bon à savoir

Performances. Les grands rayons de flou sur de grandes surfaces coûtent le plus, surtout backdrop-filter sur des éléments qui bougent ou défilent. Testez sur un téléphone.
Lisibilité. Ne floutez jamais un texte que les gens doivent lire, et vérifiez le contraste du texte sur un panneau en verre dépoli.
Empilement. Tout filter autre que none crée un nouveau contexte d'empilement et devient le bloc conteneur des descendants en position: fixed, comme transform.

Erreurs courantes

filter: blur(5). Le rayon demande une unité : blur(5px).
Utiliser filter: blur() pour un panneau en verre dépoli. Cela floute le texte du panneau lui-même. Utilisez backdrop-filter avec un fond transparent.
Un backdrop-filter qui n'affiche rien. Le fond de l'élément doit être au moins partiellement transparent, et il doit y avoir quelque chose derrière.
Deux déclarations filter. La seconde remplace la première. Mettez toutes les fonctions dans une seule valeur.
Des ombres rectangulaires sur des icônes transparentes. Utilisez filter: drop-shadow() au lieu de box-shadow.

Questions fréquentes

Comment flouter un élément en CSS ?

Utilisez filter: blur(5px);. La longueur est le rayon du flou : 0 est net et les valeurs plus grandes sont plus floues. Cela floute l'élément et tout ce qu'il contient, texte et images compris.

Comment flouter le fond derrière un élément ?

Utilisez backdrop-filter: blur(10px); sur l'élément, avec un fond partiellement transparent comme rgb(255 255 255 / 0.5). Le contenu de l'élément reste net et ce qui se trouve derrière est flouté : c'est l'effet verre dépoli.

Quelle est la différence entre drop-shadow() et box-shadow ?

box-shadow suit toujours la boîte rectangulaire de l'élément. filter: drop-shadow() suit la forme visible, y compris les zones transparentes d'un PNG ou d'un SVG, si bien que l'ombre d'une icône a le contour de l'icône.

Comment mettre une image en noir et blanc en CSS ?

Utilisez filter: grayscale(100%); (ou grayscale(1)). Ajoutez une transition et filter: grayscale(0) au survol pour faire revenir la couleur.

Peut-on utiliser plusieurs filtres à la fois ?

Oui, listez-les séparés par des espaces : filter: grayscale(1) brightness(1.2) blur(1px);. Ils sont appliqués dans l'ordre, donc l'ordre peut changer le résultat. Une seconde déclaration filter remplace la première.

Concepts liés