Webflow-Blendmodi: CSS mix-blend-mode mit Combo-Klassen hinzufügen

Update, Oktober 2026: Webflow hat Blendmodi jetzt direkt eingebaut (Style panel > Effects > Blending), und sie lassen sich live im Designer ansehen. Für ein einzelnes Element brauchst du also keinen Custom Code mehr. Die Combo-Klassen-Methode unten funktioniert weiterhin, und sie ist nach wie vor ein Weg, isolate zu nutzen, das nicht zu den 16 Blendmodi im Style panel gehört.

Das hier ist eine ganz einfache Anleitung, und wir hoffen, dass du sie in Webflow ausprobierst, denn CSS-Blendmodi können deinen Designs viel Flexibilität und richtig reizvolle Elemente verleihen. Als wir diesen Beitrag geschrieben haben, wurde das von Webflow ohne Custom Code nicht unterstützt. Als kleines Webflow-Studio, das sich vor allem auf Webflow-Design konzentriert, sucht Milk Moon Studio immer den einfachsten Weg, etwas umzusetzen, und diese Copy-and-paste-Lösung kann eine echte Hilfe sein. Für Webflow-Profis ist sie nichts Neues, aber sie funktioniert hervorragend mit Combo-Klassen und erlaubt es sogar, Elemente deines Designs vom Blending auszunehmen.

Die Umsetzung ist ganz einfach: Du fügst nur ein einziges Stück Custom Code in den <head>-Bereich deiner Projekteinstellungen ein und hängst dann an jedes Element, das einen bestimmten Blendmodus bekommen soll, einfach eine Combo-Klasse an.

Zuerst die Frage: Was sind Blendmodi? Wenn du schon einmal in Photoshop gearbeitet hast, hast du wahrscheinlich Blendmodi verwendet. Lange Zeit kamen sie vor allem in der Bildbearbeitung zum Einsatz, in CSS werden sie aber schon eine ganze Weile unterstützt, nur haben viele Builder, auch Webflow, sie bis vor Kurzem nicht nativ angeboten.

Blendmodi bestimmen, wie zwei Ebenen miteinander verrechnet werden. Es gibt eine Basisebene und eine Blendebene, und zusammen ergeben sie ein bestimmtes Ergebnis. Wichtig ist: Es muss mehr als eine Ebene geben, damit das Blending funktioniert. Die obere Ebene wird mit der darunterliegenden verrechnet, und das Ergebnis hängt vom Blendmodus ab. In Webflow könnte man sagen, dass ein Bild in einem Div mit Hintergrundfarbe sich mit dieser Farbe, also der 'Ebene' darunter, verrechnet. Das Bild ist dann nur eine Ebene auf dem Div, das in diesem Beispiel die untere Ebene ist.

In Webflow lassen sich 'Ebenen' auch stapeln. Nehmen wir an, du hast eine Section mit einem Bild als Hintergrund, darauf einen Container und darin einige Divs. Wenn du auf ein Bild in einem der obenliegenden Divs zum Beispiel den Blendmodus Darken anwendest, wird es nach unserer Erfahrung oft nicht mit dem Bild in der untersten Section verrechnet, weil die Ebenen dazwischen einen eigenen Stacking Context bilden können. Das Bild wird nach unten verrechnet, aber oft nur bis zum Div direkt darunter. Wie lösen wir das? Ganz einfach: Wir wenden den Blendmodus auf den gesamten 'Stapel' über dem Div an, mit dem sich das Bild verrechnen soll. Jetzt wird alles nach unten verrechnet. Aber Moment, nicht alles sollte verrechnet werden. In diesem 'Stapel' kann es Text oder andere Bilder geben, die nicht blenden sollen. Kein Problem: Wende auf diese einfach isolate an, dann werden sie nicht mit dem verrechnet, was hinter ihnen liegt. Keine Sorge, das gehört alles zu dieser Anleitung, und genau wie beim gewählten Blendmodus kannst du isolate auf alles anwenden, indem du einfach eine Combo-Klasse hinzufügst.

Am Ende dieses Beitrags findest du außerdem eine Liste aller verfügbaren Blendmodi und was sie jeweils bewirken.

Legen wir also los.

Schritt 1: CSS-Styles hinzufügen

Öffne deine Webflow-Projekteinstellungen (Project Settings).
Öffne Custom Code, füge den folgenden Code in den Head-Bereich ein und speichere:

Blendmodi im Head-Code der Projekteinstellungen

Wenn dort bereits ein Style-Tag steht, füge den Code einfach innerhalb des Tags ein. Halte außerdem die Liste der Blendmodi griffbereit, damit du beim Hinzufügen der Combo-Klassen weißt, welcher Modus welcher ist.

Der Code steht jetzt auf jeder Seite deiner Website zur Verfügung, da du ihn im <head>-Code der Projekteinstellungen eingefügt hast. Wenn du möchtest, kannst du ihn auch nur auf einer einzelnen Seite verwenden, indem du ihn im Designer in den <head>-Bereich der Seiteneinstellungen setzt. Wenn du Blendmodi aber auf mehreren Seiten einsetzt, füge ihn einfach in die Projekteinstellungen ein, das macht dir das Leben leichter.

Nebenbei: Den eigentlichen Blending-Effekt siehst du im Designer nicht, weil es sich um Custom Code handelt. Wenn du sehen willst, was passiert, musst du veröffentlichen und die Live-Website ansehen.

Schritt 2: Die Combo-Klasse anwenden

Im Grunde bist du startklar, also nutzen wir einen Blendmodus. In diesem Beispiel nehmen wir an, du hast ein Div mit einer festgelegten Hintergrundfarbe, und darin liegt ein Bild, auf das du den Blendmodus Multiply anwenden möchtest. So gehst du vor:

Gib dem Bild einen 'Selector'-Namen, wie du es sonst auch tust, und style es wie gewohnt. Unser Bild nimmt die volle Breite ein und hat eine absolute Positionierung, damit es genau an der richtigen Stelle sitzt. Jetzt wenden wir den Blendmodus an.
Füge eine Combo-Klasse für Multiply hinzu. Anhand der eingefügten Styles als Referenz lautet die Combo-Klasse: mbm-multiply

Die Blendmodus-Combo-Klasse hinzufügen

Das war's, dein Bild wird nach dem Veröffentlichen mit dem Blendmodus Multiply verrechnet. Veröffentliche also und sieh dir die URL der Seite in der Vorschau an.

Schauen wir uns an, wie unser Beispiel im Designer und auf der Live-Website aussieht:

Blendmodus im Designer nicht sichtbar

Hinweis: Das Blending siehst du hier wegen des Custom Codes nicht. Du musst veröffentlichen und den Link aufrufen.

Blendmodus nach der Veröffentlichung sichtbar (nicht im Designer)

Auf dieser Live-Website sehen wir, dass die Blendmodi alle einwandfrei funktionieren.

Beachte, dass wir im obigen Beispiel einige 'Ebenen' gestapelt haben. Ganz unten liegt eine sepiafarbene Hintergrundfarbe der Section, darüber eine Karte mit dem Blendmodus Darken, und darüber das Straßenbild, auf das wir Multiply angewendet haben, sodass wir die Karte jetzt 'durch' das Straßenbild sehen.

Hier ist eine praktische Liste der Combo-Klassen, die du für jeden Blendmodus verwenden solltest:

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

Dir fällt auf, dass die letzte Klasse isolate ist, und die haben wir am Anfang des Beitrags erwähnt. Zur Wiederholung: Nehmen wir an, du hast drei 'Ebenen' oder Divs, die nach unten verrechnet werden sollen. Das unterste Div hat eine Hintergrundfarbe, und du möchtest ein Bild oder Ähnliches in einem Div innerhalb eines Divs über diesem Div. Jetzt geht es in den Kaninchenbau: ein Div in einem Div in einem Div mit einem Bild. Das Bild wird beim Anwenden des Blendmodus nach unten verrechnet, nach unserer Erfahrung aber oft nur eine Ebene weit, bis zum Div, in dem es liegt. Du musst den Blendmodus also auch auf dieses Div anwenden, und so weiter, bis du ihn auf das Div anwendest, das direkt über der Ebene liegt, mit der du verrechnen willst (in diesem Fall das Div mit der Hintergrundfarbe). Das ist einfach: Du wendest denselben Blendmodus als Combo-Klasse immer weiter nach unten an, bis du dort bist. Um Probleme zu vermeiden, wendest du dann auf Elemente, die nicht blenden sollen, einfach die Combo-Klasse mbm-isolate an, egal ob Element, Bild oder was auch immer es ist, damit es sich nicht mit dem verrechnet, was dahinter liegt. (Isolate auf einem Elternelement hält das Blending seiner Kindelemente innerhalb dieses Elternelements.)

Und das war's, du bist fertig und ein Blendmodus-Profi.

Blendmodi

Und wie versprochen, hier die Liste der Blendmodi, ihrer Gruppen und was sie bewirken:

Darken

Die Modi dieser Gruppe machen die resultierenden Farben dunkler. Diese Gruppe enthält drei Werte:

Darken:

Er verrechnet Pixel anhand der Luminanzwerte jeder Farbe. Das Ergebnis ist entweder die Basisfarbe oder die Blendfarbe, je nachdem, welche dunkler ist.

Multiply:

Er verrechnet die Helligkeit der Basisfarbe mit der Blendfarbe. Das Ergebnis ist immer eine dunklere Farbe, oder es ändert sich nichts, wenn die Blendfarbe Weiß ist.

Color burn:

Er liefert dunklere Farben als der Modus Multiply, weil er den Kontrast zwischen Basis- und Blendebene erhöht.

Lighten

Die Modi dieser Gruppe machen die resultierenden Farben heller. Diese Gruppe enthält drei Werte.

Lighten:

Er nimmt jeweils die hellere Farbe von Basis- und Blendebene.

Screen:

Er verrechnet die helleren Farben beider Ebenen, hat aber einen größeren Blending-Bereich als Lighten, abhängig von der Helligkeit des Bildes.‍

Color dodge:

Er funktioniert wie Lighten, ergibt aber einen helleren Effekt als Screen, weil er den Kontrast zwischen Basis- und Blendebene verringert.

Contrast (complex):

Diese Gruppe hat drei Werte und verrechnet anhand des Kontrasts der Blendebene.

Overlay:

Er verrechnet Pixel anhand der Mitteltöne. Er kombiniert Multiply und Screen mit halber Stärke, wobei die untere Ebene dominant bleibt. Dunklere Farben in der oberen Ebene drücken die Mitteltöne dunkler, hellere Farben machen sie heller, und 50 % Grau wird transparent.

Soft light:

Eine weichere Version von Overlay ohne den harten Kontrast, die je nach Luminanz-Werten entweder einen abdunkelnden oder einen aufhellenden Effekt erzeugt.

Hard light:

Eine Version von Overlay, die Ebenen anhand der Helligkeit der oberen Ebene verrechnet.

Farben, die dunkler als 50 % Grau sind, dunkeln das Ergebnis ab, und Farben, die heller als 50 % Grau sind, hellen es auf. Overlay und Soft light sind die sanfteren Modi, Hard light kann intensiv wirken, daher hilft es oft, die Deckkraft des Elements zu verringern.

Inversion

Die Modi dieser Gruppe (Webflow nennt sie Comparative) suchen nach Unterschieden zwischen den beiden Ebenen. Bei einer weißen Blendfarbe wird die Basisebene invertiert, das heißt, die Farben springen zu ihren Gegenfarben: Rot wird zu Cyan, Grün zu Magenta und Blau zu Gelb.

Difference:

Erzeugt ein Ergebnis, indem er den Unterschied zwischen den Pixeln der Blendebene und der Basisebene bildet.

Exclusion:

Verrechnet weiße Farbwerte, indem er die Farben der Basisebene invertiert.

Die Modi dieser Gruppe invertieren Farben abhängig von ihren Helligkeitswerten. Schwarz bleibt also größtenteils unverändert, und Weiß invertiert die Farben zu 100 %.

Composite

Diese Modi verrechnen die Ebenen so, wie ihre Namen es sagen:

Hue:

Er übernimmt den Farbton der Blendebene und behält Sättigung und Helligkeit der Basisebene.

Saturation:

Er bewahrt Helligkeit und Farbton der Basisebene und verrechnet die Farben anhand des Werts der Farbintensität.

Color:

Er bewahrt die Helligkeit der Basisebene. Er legt die Farbe einfach über die Basisebene und entfernt dabei die Farben der Basisebene.

Luminosity:

Luminosity behält Farbton und Sättigung der Basisebenen, verrechnet aber die Helligkeit der Blendebene.

Diese Gruppe arbeitet mit dem HSL-Modell, daher haben Schwarz, Weiß und Grautöne keinen größeren Einfluss auf das Blending.

Blendmodi FAQ

Wie nutze ich mix-blend-mode in Webflow?

Der schnellste Weg ist heute das Style panel: Wähle dein Element, öffne Effects > Blending und wähle einen Modus. Wenn du einen Modus auf einen ganzen Stapel von Elementen mit derselben Klasse anwenden willst oder isolate brauchst, kannst du weiterhin unser CSS in die Projekteinstellungen einfügen und eine Combo-Klasse wie mbm-multiply hinzufügen, wie oben gezeigt.

Was bewirkt der Blendmodus Multiply?

Multiply multipliziert die Farben der oberen und der unteren Ebene. Schwarz bleibt Schwarz, Weiß lässt die untere Ebene unverändert, und alles dazwischen wird dunkler. Das ist praktisch, um Elemente abzudunkeln oder Schatten zu erzeugen.

Was sind die CSS-Blendmodi?

In Webflow kannst du 16 auswählen: normal, darken, multiply, color burn, lighten, screen, color dodge, overlay, soft light, hard light, difference, exclusion, hue, saturation, luminosity und den Modus namens Color. Die Liste oben erklärt jeden einzelnen, und mbm-isolate ist unsere zusätzliche Klasse für Elemente, die den Blend ignorieren sollen.

Besonderer Dank gilt Jignesh Patel für die ursprünglichen Definitionen (sein Beitrag auf imjignesh.com/blending-modes-in-css ist inzwischen offline). Visuelle Beispiele findest du auf der MDN-Seite zu mix-blend-mode.

Wenn dir solche Webflow-CSS-Tricks gefallen, schau dir an, wie wir eine Blog-Zusammenfassung mit Combo-Klassen erstellen, wie wir CMS-gesteuerte Hintergrundverläufe bauen oder unseren visuellen Leitfaden zu Easing-Funktionen.

Weitere Webflow-Anleitungen, etwa zu Analytics und mehr, findest du im How-to-Bereich unseres Blogs.