Modes de fusion Webflow : mix-blend-mode CSS avec combo classes

Mise à jour, octobre 2026 : Webflow propose désormais des modes de fusion intégrés (panneau Style > Effects > Blending), avec aperçu en direct dans le Designer. Pour un seul élément, le code personnalisé n'est donc plus nécessaire. La méthode des combo classes ci-dessous fonctionne toujours, et reste un moyen d'obtenir isolate, qui ne fait pas partie des 16 modes de fusion du panneau Style.

Voici un tutoriel très simple, et nous espérons que vous l'utiliserez dans Webflow : les modes de fusion CSS apportent beaucoup de souplesse et un vrai plus visuel à vos designs, et au moment où nous avons écrit cet article, Webflow ne les prenait pas en charge nativement sans code personnalisé. En tant que petit studio Webflow centré sur le design Webflow, Milk Moon Studio cherche toujours la façon la plus simple de faire les choses, et cette solution à copier-coller peut vraiment dépanner. Ce n'est pas nouveau pour les experts Webflow, mais elle s'accorde très bien avec les combo classes et vous permet même d'exclure certains éléments de votre design du mélange.

La mise en place est très simple : vous collez un seul morceau de code personnalisé dans la section <head> des paramètres de votre projet, puis vous ajoutez simplement une combo class à chaque élément auquel vous voulez appliquer un mode de fusion précis.

D'abord, qu'est-ce qu'un mode de fusion ? Si vous avez déjà touché à Photoshop, vous en avez probablement utilisé. Longtemps réservés à la retouche d'images, les modes de fusion sont pourtant pris en charge en CSS depuis un bon moment, mais jusqu'à récemment, beaucoup d'outils de création, Webflow compris, ne les géraient pas nativement.

Les modes de fusion déterminent comment deux calques se mélangent. Il y a un calque de base et un calque de fusion, et leur combinaison produit un résultat précis. Le point essentiel : il faut au moins deux calques pour que la fusion fonctionne. Le calque du dessus se mélange avec celui du dessous, avec un résultat qui dépend du mode choisi. Dans Webflow, on peut dire qu'une image placée dans une div avec une couleur de fond se fond dans cette couleur, ou ce 'calque' : l'image est simplement un calque posé sur la div, qui est ici le calque du dessous.

Dans Webflow, les 'calques' peuvent aussi être empilés. Imaginons une Section avec une image en arrière-plan, puis un Container par-dessus, et quelques divs dedans. Si vous avez une image dans l'une de ces divs, 'au-dessus', et que vous lui appliquez par exemple le mode Darken, d'après notre expérience elle ne se mélangera souvent pas avec l'image de la section tout en bas, car les calques intermédiaires peuvent former leur propre contexte d'empilement. L'image se fond vers le bas, mais souvent seulement jusqu'à la div située juste en dessous. Comment résoudre cela ? Simple : on applique le mode de fusion à toute la 'pile' située au-dessus de la div avec laquelle on veut le mélange. Désormais, tout se fond vers le bas. Mais zut, tout n'était pas censé fusionner. Cette pile contient peut-être du texte ou d'autres images qui ne doivent pas se mélanger. Pas de souci : appliquez isolate à ces éléments et ils ne se mélangeront pas avec ce qui se trouve derrière. Tout cela fait partie de ce tutoriel et, comme pour le mode de fusion choisi, vous pourrez appliquer isolate à n'importe quoi en ajoutant simplement une combo class.

À la fin de cet article, nous ajoutons aussi la liste de tous les modes de fusion disponibles et ce que chacun fait.

Alors, c'est parti.

Étape 1 : ajouter les styles CSS

Rendez-vous dans les Project Settings de Webflow.
Ouvrez Custom Code et collez le code ci-dessous dans la section Head, puis enregistrez :

Modes de fusion dans le code Head des paramètres du projet

Si vous avez déjà une balise style à cet endroit, ajoutez simplement le code à l'intérieur de la balise, et gardez la liste des modes de fusion à portée de main pour savoir lequel est lequel au moment d'ajouter les combo classes.

Le code est maintenant disponible sur toutes les pages de votre site, puisque vous l'avez appliqué au code <head> des paramètres du projet. Si vous le souhaitez, vous pouvez le limiter à une seule page en l'ajoutant à la section <head> des paramètres de cette page dans le Designer, mais si vous comptez utiliser les modes de fusion sur plusieurs pages, ajoutez-le simplement aux paramètres du projet pour vous faciliter la vie.

Précision utile : vous ne pourrez pas voir l'effet de fusion dans le Designer, puisqu'il s'agit de code personnalisé. Pour voir ce qui se passe, il faut publier et regarder le site en ligne.

Étape 2 : appliquer la combo class

Vous êtes pratiquement prêt, alors utilisons un mode de fusion. Pour cet exemple, supposons que vous ayez une div avec une couleur de fond définie, et dans cette div une image à laquelle vous voulez appliquer le mode de fusion Multiply. Voici comment faire :

Donnez un nom au 'selector' de l'image comme d'habitude et stylez-la comme d'habitude. Notre image est en pleine largeur, avec un positionnement absolu pour la placer exactement où il faut. Il reste à appliquer le mode de fusion.
Ajoutez une combo class pour Multiply. En vous basant sur les styles que vous avez collés, la combo class doit être : mbm-multiply

Ajouter la combo class du mode de fusion

Et voilà : votre image utilisera le mode de fusion Multiply une fois publiée. Publiez donc et ouvrez l'aperçu de l'URL de la page.

Voyons ce que donne notre exemple dans le Designer et sur le site en ligne :

Mode de fusion non visible dans le Designer

Remarque : la fusion n'est pas visible ici à cause du code personnalisé. Il faut publier et ouvrir le lien.

Mode de fusion visible une fois publié, mais pas dans le Designer

Mode de fusion visible une fois publié (pas dans le Designer)

Sur ce site en ligne, on voit que les modes de fusion fonctionnent à merveille.

Dans l'exemple ci-dessus, nous avons empilé quelques 'calques'. Tout en bas, une couleur sépia sert de fond à la section. Par-dessus, une carte avec le mode Darken, puis l'image de la rue à laquelle nous avons appliqué Multiply, ce qui nous permet de voir la carte 'à travers' l'image de la rue.

Voici la liste pratique des combo classes à utiliser pour chaque mode de fusion :

mbm-normal
mbm-multiply
mbm-screen
mbm-overlay
mbm-darken
mbm-lighten
mbm-color-dodge
mbm-color-burn
mbm-hard-light
mbm-soft-light
mbm-difference
mbm-exclusion
mbm-hue
mbm-saturation
mbm-color
mbm-luminosity
mbm-isolate

Vous remarquerez que la dernière est isolate, dont nous avons parlé au début de l'article. Petit rappel : imaginons trois 'calques' ou divs qui doivent se fondre vers le bas. La div du bas a une couleur de fond, et vous voulez une image (ou autre chose) dans une div elle-même dans une div au-dessus. Nous voilà au fond du terrier : une div dans une div dans une div avec une image. L'image se fond vers le bas quand vous appliquez le mode de fusion, mais d'après notre expérience souvent d'un seul niveau, jusqu'à la div qui la contient. Vous devez donc appliquer le mode de fusion à cette div aussi, et ainsi de suite jusqu'à la div située au-dessus du calque (ici, la div avec la couleur de fond) avec lequel vous voulez fusionner. C'est facile : il suffit de continuer à appliquer la même combo class de mode de fusion vers le bas jusqu'à y arriver. Ensuite, pour éviter tout souci, si certains éléments ne doivent pas fusionner, appliquez simplement la combo class mbm-isolate à cet élément, cette image ou ce qu'il en est, afin qu'il ne se mélange pas avec ce qui se trouve derrière. (Isolate sur un parent garde la fusion de ses enfants à l'intérieur de ce parent.)

Et voilà, c'est terminé : vous êtes un expert des modes de fusion.

Les modes de fusion

Comme promis, voici la liste des modes de fusion, leurs groupes et ce qu'ils font :

Darken

Les modes de ce groupe assombrissent les couleurs finales. Ce groupe contient trois valeurs :

Darken :

Il fusionne les pixels selon les valeurs de luminance de chaque couleur. Le résultat est soit la couleur de base, soit la couleur de fusion, selon la plus sombre.

Multiply :

Il multiplie la luminosité de la couleur de base par la couleur de fusion. Le résultat est toujours plus sombre, ou inchangé si la couleur de fusion est le blanc.

Color burn :

Il donne des couleurs plus sombres que le mode Multiply, car il augmente le contraste entre le calque de base et le calque de fusion.

Lighten

Les modes de ce groupe éclaircissent les couleurs finales. Ce groupe contient trois valeurs.

Lighten :

Il retient la couleur la plus claire entre le calque de base et le calque de fusion.

Screen :

Il fusionne les couleurs les plus claires des deux calques, mais avec une plage de fusion plus large que Lighten, selon la luminosité de l'image.‍

Color dodge :

Il fonctionne comme Lighten, mais donne un effet plus lumineux que Screen, car il diminue le contraste entre les calques de base et de fusion.

Contrast (complex) :

Ce groupe contient trois valeurs et fusionne selon le contraste du calque de fusion.

Overlay :

Il fusionne les pixels à partir des tons moyens. Il combine Multiply et Screen à demi-intensité, le calque du dessous restant dominant. Les couleurs sombres du calque supérieur assombrissent les tons moyens, les couleurs claires les éclaircissent, et le gris à 50 % devient transparent.

Soft light :

Une version plus douce d'Overlay, sans le contraste brutal, qui applique un effet d'assombrissement ou d'éclaircissement selon les valeurs de luminance.

Hard light :

Une version d'Overlay qui fusionne les calques selon la luminosité du calque supérieur.

Les couleurs plus sombres que le gris à 50 % assombrissent le résultat, et celles plus claires que le gris à 50 % l'éclaircissent. Overlay et Soft light sont les plus doux ; Hard light peut être intense, et réduire l'opacité de l'élément aide souvent.

Inversion

Les modes de ce groupe (Webflow les appelle Comparative) cherchent les différences entre les deux calques. Avec une couleur de fusion blanche, le calque de base est inversé, ce qui signifie simplement que les couleurs passent à leur opposé : le rouge devient cyan, le vert devient magenta et le bleu devient jaune.

Difference :

Produit un résultat en calculant la différence entre les pixels du calque de fusion et ceux du calque de base.

Exclusion :

Fusionne les valeurs de blanc en inversant les couleurs du calque de base.

Les modes de ce groupe inversent les couleurs selon leurs valeurs de luminosité. Le noir est donc très peu affecté, et le blanc inverse les couleurs à 100 %.

Composite

Ces modes fusionnent les calques comme leur nom l'indique :

Hue :

Il prend la teinte du calque de fusion et conserve la saturation et la luminosité du calque de base.

Saturation :

Il préserve la luminosité et la teinte du calque de base et fusionne les couleurs selon la valeur d'intensité de la couleur.

Color :

Il préserve la luminosité du calque de base. Il applique simplement la couleur par-dessus le calque de base, en supprimant les couleurs de ce dernier.

Luminosity :

Luminosity conserve la teinte et la saturation des calques de base, mais fusionne la luminosité du calque de fusion.

Ce groupe fonctionne selon le modèle TSL (HSL), si bien que les noirs, les blancs et les gris n'ont pas d'effet plus marqué sur la fusion.

FAQ sur les modes de fusion

Comment utiliser mix-blend-mode dans Webflow ?

Le plus rapide aujourd'hui, c'est le panneau Style : sélectionnez votre élément, ouvrez Effects > Blending et choisissez un mode. Si vous avez besoin d'appliquer un mode à toute une pile d'éléments partageant la même classe, ou si vous voulez isolate, vous pouvez toujours coller notre CSS dans les paramètres du projet et ajouter une combo class comme mbm-multiply, comme montré plus haut.

Que fait le mode de fusion multiply ?

Multiply multiplie les couleurs des calques supérieur et inférieur. Le noir reste noir, le blanc laisse le calque du dessous inchangé, et tout ce qui se trouve entre les deux s'assombrit, ce qui est pratique pour assombrir des éléments ou créer des ombres.

Quels sont les modes de fusion CSS ?

Il y en a 16 que vous pouvez choisir dans Webflow : normal, darken, multiply, color burn, lighten, screen, color dodge, overlay, soft light, hard light, difference, exclusion, hue, saturation, luminosity et le mode appelé Color. La liste ci-dessus explique chacun d'eux, et mbm-isolate est notre classe supplémentaire pour les éléments qui doivent ignorer la fusion.

Un merci tout particulier à Jignesh Patel pour les définitions d'origine (son article sur imjignesh.com/blending-modes-in-css n'est plus en ligne depuis). Pour des exemples visuels, rendez-vous sur la page MDN sur mix-blend-mode.

Si vous aimez ce genre d'astuces CSS pour Webflow, découvrez comment nous créons un résumé d'article avec des combo classes, comment nous construisons des dégradés d'arrière-plan pilotés par le CMS, ou notre guide visuel des fonctions d'easing.

Pour d'autres tutoriels Webflow, notamment sur l'analytique, consultez la section tutoriels de notre blog.