Backdrop-filter CSS : Effet de flou dynamique au scroll

Les interfaces modernes utilisent de plus en plus des effets de transparence et de verre dépoli – glassmorphism – pour donner du relief aux menus et aux éléments d’une page web. Grâce à la propriété CSS backdrop-filter, vous pouvez créer facilement un effet de flou dynamique au scroll qui apporte immédiatement un rendu plus élégant et professionnel à votre site.

Dans ce tutoriel webDesign, vous allez apprendre à concevoir un header transparent qui devient progressivement plus flou lorsque l’utilisateur fait défiler la page. Nous verrons ensemble comment utiliser backdrop-filter en CSS, comment gérer l’animation avec JavaScript, et surtout comment comprendre chaque étape simplement, même si vous débutez en développement front-end.

• Donnez un rendu moderne et premium à vos menus grâce à un effet Liquid Glass fluide et élégant.
• Comprenez enfin comment fonctionne réellement backdrop-filter en CSS sans vous perdre dans des explications techniques compliquées.
• Ajoutez une animation dynamique au scroll avec quelques lignes de JavaScript simples et faciles à réutiliser dans vos projets web.

Le web moderne adore les effets visuels élégants. Parmi eux, le fameux effet de verre dépoli, aussi appelé glassmorphism, est devenu incontournable. Vous l’avez sûrement déjà vu sur des menus transparents, des cartes flottantes ou des interfaces futuristes dignes d’une application Apple.

La bonne nouvelle, c’est qu’aujourd’hui vous pouvez reproduire ce rendu très facilement grâce à la propriété CSS backdrop-filter.

Nous allons construire l’effet étape par étape, comprendre le rôle de chaque ligne de code, puis voir comment personnaliser le rendu pour l’adapter à vos propres projets web.

Voici ce que nous allons coder :

Comprendre le principe du backdrop-filter

Avant d’écrire la moindre ligne de code, il est important de comprendre ce que fait réellement backdrop-filter.

Contrairement à filter, qui applique un effet directement sur un élément, backdrop-filter agit sur ce qui se trouve derrière lui.

Imaginez une vitre légèrement opaque. Vous voyez l’arrière-plan à travers cette vitre… mais de façon floue. C’est exactement ce que reproduit cette propriété CSS.

Par exemple :

backdrop-filter: blur(10px);

Cette ligne demande au navigateur :

“Prends tout ce qui est derrière cet élément et applique un flou de 10 pixels.”

• C’est cette propriété CSS qui permet de créer des interfaces modernes très élégantes.

Cependant, il existe une condition importante : l’élément doit avoir un fond semi-transparent. Sinon, le flou ne sera tout simplement pas visible.

C’est pourquoi on l’utilise souvent avec :

background: rgba(255,255,255,0.2);

Le 0.2 représente ici l’opacité du fond.

👉 Tout savoir sur les codes couleurs en CSS.

Le rendu que nous allons créer

Dans cette démonstration, nous allons réaliser :

• un menu fixé en haut de la page
• un arrière-plan coloré
• un effet de flou léger au départ
• un flou plus intense lorsque l’utilisateur fait défiler la page.

En bonus, le menu deviendra légèrement plus compact pendant le scroll afin de renforcer l’effet visuel.

C’est typiquement le genre d’animation discrète qui donne immédiatement un aspect plus professionnel à un site web.

Structure HTML de la page

Commençons par créer notre structure HTML.

Voici le code complet :

<header class="header-blur">

    <nav>
        <div class="logo">Créa</div>

        <a href="#">Accueil</a>
        <a href="#">Blog</a>
        <a href="#">Tutoriels</a>
        <a href="#">Contact</a>
    </nav>

</header>

<section class="hero">

    <h1>Backdrop Filter au Scroll</h1>

    <p>
        Faites défiler la page pour voir le niveau de flou
        augmenter dynamiquement sur le header.
    </p>

</section>

<section class="content">

    <h2>Effet Glassmorphism</h2>

    <p>
        Cet exemple utilise la propriété CSS
        <strong>backdrop-filter</strong>
        afin de créer un effet de verre dépoli moderne.
    </p>

</section>

Prenons quelques minutes pour comprendre ce que nous venons d’écrire.

Le header

Le <header> représente le bandeau supérieur du site.

Nous lui avons donné la classe :

class="header-blur"

C’est cette classe qui recevra notre effet de flou en CSS.

La navigation

À l’intérieur du header, nous trouvons une balise <nav>.

Elle contient :

• le logo ;
• les liens du menu.

Rien de compliqué ici. Nous préparons simplement la structure de notre interface.

La section hero

La section .hero sert surtout à créer un grand espace visuel afin que le scroll soit visible.

Sans contenu suffisamment haut, impossible de tester notre effet dynamique.

Ajouter un fond moderne à la page

Passons maintenant au CSS.

Commençons par le style général de la page.

body{
    font-family:Arial, Helvetica, sans-serif;
    min-height:300vh;

    background:
    linear-gradient(135deg,#f8cdda 0%,#1d2b64 100%);
}

Comprendre le dégradé CSS

La fonction linear-gradient() permet de créer un dégradé de couleurs.

Ici :

linear-gradient(135deg,#f8cdda 0%,#1d2b64 100%);

nous demandons :

• un dégradé diagonal ;
• une couleur rose clair ;
• une couleur bleu foncé.

Le résultat donne immédiatement une ambiance moderne.vEt surtout, cela permet de mieux voir l’effet de flou.

Car oui… faire un backdrop-filter sur un fond blanc uni, c’est un peu comme essayer de voir du brouillard dans une pièce déjà blanche.

👉 Tout comprendre au dégradé en CSS.

Créer le menu transparent

Nous allons maintenant styliser le header.

.header-blur{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    padding:25px 40px;

    background:rgba(255,255,255,0.15);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    transition:
    backdrop-filter 0.4s ease,
    background 0.4s ease,
    padding 0.4s ease;
}

Pourquoi utiliser position: fixed ? Car il permet au menu de rester collé en haut de l’écran pendant le scroll.

Sans cela, le menu disparaîtrait lorsque l’utilisateur descendrait dans la page. C’est indispensable pour notre animation dynamique.

Le fond semi-transparent

Voici probablement la ligne la plus importante :

background:rgba(255,255,255,0.15);

Le fond est blanc… mais seulement à 15 % d’opacité. Cela permet de voir le décor derrière le menu.

Et puisque le décor reste visible, backdrop-filter peut le flouter.

Le blur CSS

Nous appliquons maintenant le flou :

backdrop-filter:blur(4px);

Le menu agit alors comme une vitre de verre dépoli. Plus la valeur augmente, plus le flou devient intense.

Par exemple :

blur(2px)

donnera un effet très discret.

Alors que :

blur(20px)

produira un effet beaucoup plus marqué.

Pourquoi ajouter -webkit-backdrop-filter ?

Safari adore parfois compliquer un peu la vie des développeurs. Pour assurer la compatibilité avec certains navigateurs Apple, nous ajoutons :

-webkit-backdrop-filter:blur(4px);

C’est exactement le même effet, mais avec un préfixe spécifique.

Ajouter une transition fluide

Regardez cette partie :

transition:
backdrop-filter 0.4s ease,
background 0.4s ease,
padding 0.4s ease;

Grâce à cela, les changements ne seront pas brutaux. Le menu se transformera progressivement.

C’est ce qui donne ce côté premium et agréable à l’animation.

Modifier le menu pendant le scroll

Nous allons maintenant créer une deuxième version du header.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

.header-blur.scrolled{
    padding:15px 40px;

    background:rgba(255,255,255,0.35);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

Que change cette classe ?

Lorsque la classe .scrolled sera ajoutée :

• le menu deviendra plus petit ;
• le fond sera plus opaque ;
• le flou augmentera fortement.

Le résultat est très élégant.

Au repos, le menu reste léger et discret et pendant le scroll, il devient plus lisible et plus présent.

Styliser la navigation

Ajoutons maintenant un peu de mise en forme.

nav{
    display:flex;
    align-items:center;
    gap:30px;
}

Ici, display:flex permet d’aligner facilement les éléments du menu.

Le gap ajoute de l’espace entre les liens.

Styliser les liens

nav a{
    color:white;
    text-decoration:none;
}

Nous supprimons le soulignement des liens et nous affichons le texte en blanc. Simple, efficace, propre.

Parfois, le CSS moderne ressemble presque à du rangement IKEA : peu de pièces, mais tout doit être au bon endroit.

Préparer la zone de scroll

Nous allons maintenant créer une grande section visible.

.hero{
    height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
    color:white;
}

100vh signifie :

“100 % de la hauteur visible de l’écran.”

La section prend donc toute la fenêtre du navigateur. C’est parfait pour créer un effet immersif.

👉 Pour aller plus loin : Les unités viewport en CSS

Ajouter le JavaScript dynamique

Le CSS seul ne peut pas savoir si l’utilisateur a scrollé. Nous devons donc utiliser un petit peu de JavaScript.

Voici le code :

const header = document.querySelector('.header-blur');

window.addEventListener('scroll', () => {

    if(window.scrollY > 50){
        header.classList.add('scrolled');
    }else{
        header.classList.remove('scrolled');
    }

});

Comprendre querySelector()

document.querySelector('.header-blur');

permet de sélectionner le header dans la page.

Nous stockons cet élément dans une variable nommée header.

Ensuite, nous allons détecter le scroll :

window.addEventListener('scroll', () => {

signifie :

“Exécute ce code à chaque fois que l’utilisateur fait défiler la page.”

👉 Pour en savoir plus : Écoute et gestion d’évènement

Comprendre scrollY

La propriété :

window.scrollY

indique la position verticale du scroll.

Par exemple :

• 0 = tout en haut ;
• 200 = l’utilisateur a descendu de 200 pixels.

Ajouter une classe dynamiquement

Si le scroll dépasse 50 pixels :

header.classList.add('scrolled');

la classe .scrolled est ajoutée.

Sinon :

header.classList.remove('scrolled');

elle est retirée.

• C’est ce mécanisme qui rend notre animation dynamique.

Pourquoi cette technique fonctionne ?

Cette méthode possède plusieurs avantages :

• le JavaScript reste minimal ;
• le CSS gère toute l’animation ;
• le rendu est fluide ;
• le code reste facile à maintenir.

C’est d’ailleurs une excellente habitude à prendre : laisser le CSS gérer les animations autant que possible.

Personnaliser votre effet

Une fois le système compris, vous pouvez facilement le modifier.

Par exemple :

blur(30px)

créera un effet très futuriste.

Ou encore :

background:rgba(0,0,0,0.4);

donnera un menu sombre élégant.

Vous pouvez aussi :

• changer les couleurs ;
• augmenter la vitesse des transitions ;
• ajouter une ombre ;
• créer un menu totalement transparent au départ.

Les possibilités sont immenses.

Compatibilité des navigateurs

Aujourd’hui, backdrop-filter fonctionne sur la majorité des navigateurs modernes. Cependant, certains anciens navigateurs ne le prennent pas en charge.

Dans ce cas, le menu restera simplement transparent sans flou. Et honnêtement, ce n’est pas dramatique.

Votre site restera parfaitement utilisable.

Les erreurs fréquentes

Lorsque l’effet ne fonctionne pas, cela vient souvent d’un de ces problèmes :

Le fond est opaque. Si vous utilisez :

background:white;

le flou sera invisible.

• Il faut absolument utiliser un fond semi-transparent.

Aucun élément derrière le header. Le flou agit sur l’arrière-plan. S’il n’y a rien derrière, aucun effet ne sera visible.

Oublier le préfixe Safari. Sans :

-webkit-backdrop-filter

l’effet peut ne pas fonctionner correctement sur certains appareils Apple.

Aller encore plus loin

Maintenant que vous maîtrisez le principe, vous pouvez créer :

• des cartes glassmorphism ;
• des popups modernes ;
• des sidebars transparentes ;
• des menus flottants avancés ;
• des interfaces inspirées d’iOS ou macOS.

Et honnêtement, c’est souvent ce genre de petits détails qui transforme un site “correct” en site réellement moderne.

Le plus intéressant, c’est que vous venez d’apprendre une technique utilisée sur de nombreux sites professionnels… avec finalement très peu de code.

Le code complet

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Effet de flou dynamique au scroll</title>

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    min-height:300vh;
    background:
    linear-gradient(135deg,#f8cdda 0%,#1d2b64 100%);
}

/* HEADER */

.header-blur{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    padding:25px 40px;

    background:rgba(255,255,255,0.15);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    border-bottom:1px solid rgba(255,255,255,0.2);

    transition:
    backdrop-filter 0.4s ease,
    background 0.4s ease,
    padding 0.4s ease;
}

.header-blur.scrolled{
    padding:15px 40px;

    background:rgba(255,255,255,0.35);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

/* NAVIGATION */

nav{
    display:flex;
    align-items:center;
    gap:30px;
}

.logo{
    font-size:24px;
    font-weight:bold;
    color:white;
    margin-right:auto;
}

nav a{
    color:white;
    text-decoration:none;
    font-size:16px;
    transition:opacity 0.3s ease;
}

nav a:hover{
    opacity:0.7;
}

/* HERO */

.hero{
    height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
    color:white;

    padding:40px;
}

.hero h1{
    font-size:64px;
    margin-bottom:20px;
}

.hero p{
    font-size:20px;
    max-width:700px;
    line-height:1.6;
}

/* CONTENT */

.content{
    width:min(1000px,90%);
    margin:auto;

    background:rgba(255,255,255,0.2);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border-radius:30px;

    padding:60px;

    color:white;
}

.content h2{
    margin-bottom:20px;
    font-size:36px;
}

.content p{
    line-height:1.8;
    margin-bottom:20px;
}
</style>
</head>
<body>

<header class="header-blur">

    <nav>
        <div class="logo">Créa</div>

        <a href="#">Accueil</a>
        <a href="#">Blog</a>
        <a href="#">Tutoriels</a>
        <a href="#">Contact</a>
    </nav>

</header>

<section class="hero">

    <h1>Backdrop Filter au Scroll</h1>

    <p>
        Faites défiler la page pour voir le niveau de flou
        augmenter dynamiquement sur le header.
    </p>

</section>

<section class="content">

    <h2>Effet Glassmorphism</h2>

    <p>
        Cet exemple utilise la propriété CSS
        <strong>backdrop-filter</strong>
        afin de créer un effet de verre dépoli moderne.
    </p>

    <p>
        Lorsque l’utilisateur fait défiler la page,
        une classe CSS est automatiquement ajoutée
        au header via JavaScript.
    </p>

    <p>
        Cette classe augmente le flou,
        modifie la transparence
        et réduit légèrement la hauteur du menu.
    </p>

</section>

<script>
const header = document.querySelector('.header-blur');

window.addEventListener('scroll', () => {

    if(window.scrollY > 50){
        header.classList.add('scrolled');
    }else{
        header.classList.remove('scrolled');
    }

});
</script>

</body>
</html>

---

FAQ à propos de backdrop-filter CSS

---

Créer un effet de flou dynamique avec backdrop-filter est une excellente façon de moderniser une interface web sans rendre son code complexe.

Vous avez vu qu’avec un peu de CSS et quelques lignes de JavaScript, il est possible de produire une animation fluide, élégante et très actuelle.

Mais surtout, vous avez appris quelque chose d’important : les effets visuels réussis ne viennent pas forcément de technologies compliquées. Souvent, ce sont simplement plusieurs petites techniques bien combinées.

Le meilleur conseil maintenant ? Expérimentez. Testez différentes intensités de flou, jouez avec les couleurs, modifiez les transparences, essayez des effets plus subtils ou au contraire très marqués.

C’est en manipulant le code vous-même que vous commencerez réellement à développer votre œil de développeur front-end.

👉 Pour aller plus loin avec les propriétés CSS :

• Effet parallaxe en CSS
• Diagramme en courbe en HTML
• Diagramme circulaire en HTML