Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

CSS Blend Modes (Blendmodi)

Die Blendmodi (auch Mischmodi) aus Photoshop & Co. sind weitestgehend bekannt und erfreuen sich u. a. bei der Erstellung fotografischer Effekte größter Beliebtheit. Mit CSS Blend Modes können diese Effekte auch im Web realisiert werden. Nach verschiedenen Regeln werden Hintergrundgrafiken miteinander verrechnet. Im Folgenden erklären wir die Eigenschaften background-blend-mode und mix-blend-mode anhand anschaulicher Beispiele.

Funktionsweise

Das Prinzip ist denkbar einfach. Mehrere HTML-Elemente oder CSS-Hintergründe werden entsprechend des gewählten Blendmodus miteinander verrechnet.

Liste der Blend Modes

In großen Teilen sind die CSS Blend Modes identisch mit denen in Photoshop; das Bildbearbeitungsprogramm bietet allerdings noch einige Effekte mehr an. Vergleicht man das visuelle Ergebnis von Photoshop und CSS ist nahezu kein Unterschied zu erkennen.
Folgende Blendmodi sind in CSS verfügbar. Die Liste zeigt jeweils den Effekt bei der Mischung des Bildes mit einem einfarbigen gelben Hintergrund.

Blendmodus normal (Normal)
Blendmodus normal (Normal)
Blendmodus darken (Abdunkeln)
Blendmodus darken (Abdunkeln)
Blendmodus multiply (Multiplizieren)
Blendmodus multiply (Multiplizieren)
Blendmodus color-burn (Farbig nachbelichten)
Blendmodus color-burn (Farbig nachbelichten)
Blendmodus lighten (Aufhellen)
Blendmodus lighten (Aufhellen)
Blendmodus screen (negativ multiplizieren)
Blendmodus screen (negativ multiplizieren)
farbig-abwedeln
Blendmodus color-dodge (farbig abwedeln)
Blendmodus overlay (Ineinanderkopieren)
Blendmodus overlay (Ineinanderkopieren)
Blendmodus soft-light (weiches Licht)
Blendmodus soft-light (weiches Licht)
Blendmodus hard-light (hartes Licht)
Blendmodus hard-light (hartes Licht)
Blendmodus difference (Differenz)
Blendmodus difference (Differenz)
Blendmodus exclusion (Ausschluss)
Blendmodus exclusion (Ausschluss)
Blendmodus hue (Farbton)
Blendmodus hue (Farbton)
Blendmodus saturation (Sättigung)
Blendmodus saturation (Sättigung)
Blendmodus color (Farbe)
Blendmodus color (Farbe)
Blendmodus luminosity (Luminanz)
Blendmodus luminosity (Luminanz)

Beispiel: Text überblenden (3D-Brillen-Effekt)

<h1>Headline</h1>
h1 {
  font-size: 200px;
  position: relative;
  color: cyan;
}

h1::after {
  content: 'Headline';  
  position: absolute;  
  top: 0;  
  left: 0;  
  color: red;  
  left: 10px;  
  mix-blend-mode: multiply;
}

Beispiel anschauen

Beispiel: Bild in Farbe überblenden

Das folgende Beispiel verwendet einen <div> mit zwei Hintergründen. Mehrere Hintergründe stellen dank der CSS3-Eigenschaft »Multiple Backgrounds« kein Problem dar. Der erste Hintergrund ist das Bild des Ammoniten, der zweite Hintergrund ist einfarbig orange.
Die CSS-Eigenschaft für den Blendmodus nennt sich background-blend-mode: BLENDMODUS. Für Webkit Nightly muss zum Veröffentlichungszeitpunkt dieses Beitrags noch ein Vendor-Prefix geschrieben werden. Da unser Beispiel zwei Hintergründe ineinander überblendet, schreiben wir innerhalb von background-blend-mode auch zwei Blendmodi mit Komma getrennt nacheinander. Der erste Blendmodus gilt dann für das Bild des Ammoniten, der zweite Blendmodus bezieht sich auf die Hintergrundfarbe.

Demo anzeigen

div {
  padding: 10px;
  height: 300px;
  width: 400px;
  background: url(ammonit.jpg) 50% 50% no-repeat, orange; /* multiple backgrounds */
  background-blend-mode: difference, normal; 
}

Beispiel: Bild in Bild überblenden

Das Beispiel lässt sich mit einer zweiten Grafik anstelle der Hintergrundfarbe deutlich interessanter gestalten. Die Kombination zweier Grafiken im Modus »Differenz« führt zu folgendem Ergebnis.

Zwei Grafiken im Modus Differenz
Zwei Grafiken im Modus Differenz

Demo anzeigen

Beispiel: Div in Hintergrund überblenden

Das dritte Beispiel verrechnet zwei unterschiedliche HTML-Elemente miteinander. Dazu wird die CSS-Eigenschaft mix-blend-mode verwendet. Per Mouse-Over ändern sich der Blendmodus und die Größe des Elements.

body {
  background:url(pattern.jpg); 
}

div {
  height:200px;
  width:200px;
  background: yellow;
  transition:all 1s ease-in-out;
  mix-blend-mode: color; 
}

div:hover {
  height: 400px;
  width: 400px;
  mix-blend-mode: exclusion;
}

Demo anzeigen

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-backgroundblendmode feature across the major browsers from caniuse.com

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 13 Kommentare

  1. René
    schrieb am 10.07.2016 um 14:26 Uhr:

    Weisst Du was, ich habe ein eispiel: Ohne Werbung zu machen, kannst es ja löschen, dieses Template http://ja-mono.demo.joomlart.com/index.php/en/ verwendet diese blende-modes Geschichte. Mach da mal in nützlicher Zeit eine Lösung rein, dass alle Browser, vorallem der Edge und IE11 (beide unterstützen kein blend-mode) etwas ähnliches zeigen, wie im Firefox oder so. Ich denke, jetzt habe ich mich sicher gut zu erkennen gegeben, es sei denn, Du hast eine Lösung, die nicht länger dauert, als 2 Stunden. Übrigens, ich nimm das alles mit Hummor und Spass, also es gibt grössere Probleme in dieser Welt, verstehe mich richtig… Gruss René

    Antworten
    • Jonas Hellwig
      schrieb am 10.07.2016 um 14:39 Uhr:

      Ich habe mir das Beispiel jetzt nicht im IE angeschaut. Aber wenn dort nur die Filter fehlen, ansonsten aber keine Fehler o.ä. entstehen – dann ist doch alles gut. Wenn Fehler auftreten ist es schlecht gemacht. >> http://goo.gl/6xDV0L

      Antworten
  2. René
    schrieb am 10.07.2016 um 14:16 Uhr:

    Ja genau, habe ich zitiert, weil Du dort einen Link hast (Einen detaillierten Beitrag zu diesem Thema findet ihr hier.) und dann man bei diesen Info‘ s landet, die ich oben reinkopiert habe.. Egal wie dem auch sei, weniger ist mehr. Gruss René

    Antworten
    • Jonas Hellwig
      schrieb am 10.07.2016 um 14:35 Uhr:

      Sorry René – aber ich habe auf den Beitrag verlinkt und konkret von »Progressive Enhancement« gesprochen. Im verlinkten Beitrag zitierst du aber aus dem Abschnitt »Graceful Degradation«. Das ist ja genau das Gegenteil von dem was ich meine und führt zu Problemen – wie im Beitrag ja auch beschrieben :)

      Antworten
  3. René
    schrieb am 10.07.2016 um 13:46 Uhr:

    Sorry habe vergessen, Dein Vorschlag mit diesem Progressive Enhancement-Prinzip zeigt genau das, was ich ja bemängle, denn da steht wenn man das ganze durchgeht:

    Vorteile des Prinzips „Graceful Degradation“

    Entspricht unserer Gewohnheit
    Moderne Systeme werden voll ausgereizt. Neuste Technologien können eingesetzt werden

    Nachteile des Prinzips „Graceful Degradation“

    Schwache Systeme werden oft nicht oder nur schlecht berücksichtigt
    Performance-Probleme: Schwache Systeme können überlastet werden
    Informationen sind nicht für alle Menschen gleich zugänglich, wenn schwache Systeme und/oder kleine Displays bestraft werden. Das widerspricht der Grundidee des Internet.
    Schwierige Erweiterung der Website. Änderungen müssen in allen schwächeren Systemen getestet und ggf. nachgerüstet werden

    Die Nachteile sind extrem, damit kann ich nicht leben. Hab mich aber nicht vertieft genug damit auseinander gesetzt. So jetzt hab ichs.

    Antworten
    • Jonas Hellwig
      schrieb am 10.07.2016 um 14:07 Uhr:

      Hallo René, du zitierst jetzt »Graceful Degradation«. Ich habe von Progressive Enhancement gesprochen. Das ist fast das Gegenteil. Wir haben in zahlreichen Projekten Filter-Effekte eingesetzt und die Fallback-Lösungen für inkompatible Browser sind absolut in Ordnung.

      Antworten
  4. René
    schrieb am 10.07.2016 um 13:41 Uhr:

    Besten Dank für Deine Antwort und ja klar, ich weiss, dass man Abstriche machen muss gegeben durch die verschiedenen Browser, das war immer so und wird immer so bleiben. Aber was soll ich riesige Techniken anwenden, wenn sie ja gar nicht unterstützt werden, ich manöfriere mich da ja selbst in unendlich viel Arbeit herein. Einen CSS-Neuaufbau will man gerade dann nicht machen, wenn man das Rad nicht neu erfinden will, zum Beispiel bei Bootstrap. Hinzukommt, dass man heute mit CMS arbeitet, für die endlos gute Templates bereitgestellt werden, gerade da wird der Aufwand immens, wenn man diese auf die verschiedenen Browser anpassen will. Ich mache das immer so, ich schaue was wird von wem unterstützt und an Hand von diesen Resultaten entwickle ich oder passe an. Für mich ist es ganz einfach und auch das war schon immer so und wird so bleiben, „weniger ist immer mehr“. Die „Wow-Effekte“ sind zeitlich immer begrenzt, also lasse ich das… Gruss René

    Antworten
  5. René
    schrieb am 09.07.2016 um 11:40 Uhr:

    Vielen Dank für diesen wirklich guten Beitrag. Leider führen alle diese neuen Möglichkeiten in ein Desaster der Browserweichenstellerei, da ja nicht alle Browser dieses Feature unterstützen. Für den neuen IE, den Edge, aber auch für den IE11 geht das mit diesen blend-modes nicht. Kurz, sie können nichts damit anfangen und zeigen darum rein gar nichts an. Für mich, als Webdesigner machen solche Sachen, eben Dinge, die nicht von allen Browsern unterstützt werden null Sinn und darum lasse ich sie weg. Wirklich schade, aber ich gehe nicht mehr in die Zeit zurück, in der wir für jeden Browser eine Website bauen mussten damit alle User das Gleiche ansehen durften. Microsoft hat bekannt gegeben, dass sie das blend-mode Zeugs in die Liste aufgenommen haben, jedoch weiss niemand wann dass der Fall sein wird. Trotzdem, vielen Dank, denn der Beitrag verdeutlicht die wunderschönen Möglichkeiten von CSS3 sehr gut. Gruss René

    Antworten
  6. Martin
    schrieb am 26.02.2014 um 13:36 Uhr:

    Schöne Spielerei. Das Beispiel ist allerdings wenig sinnvoll.

    Ein besseres Beispiel wäre ein fotografiertes Objekt mit weißem Hintergrund inkl. natürlichem Schatten. Hier hätte man die Möglichkeit über Multiplizieren den Hintergrund der Webseite, wenn es ein Muster, also keine reine Farbe ist, durchscheinen zu lassen. Das wäre schon sehr praktisch.

    Eine andere Frage die sich mir stellt ist die Performance. Kürzlich wurde gemutmaßt das es CSS-Regions nicht geben wird, weil es zu viele Zeilen Code in der Engine der Browser einnehmen würde. Ich kann mir vorstellen das es sich bei diesen Überblendeffekten ähnlich verhalten könnte.

    Antworten
  7. Andre
    schrieb am 09.01.2014 um 09:14 Uhr:

    Sehr schöner Artikel!

    Das wäre ja ein Träumchen, wenn das zukünftig in allen Browsern unterstützt würde. Dann sind die Zeiten vorbei, in denen die Layouter mit ihren Halbtransparenten und Blendmodi die Umsetzer zur Verzweiflung treiben.

    Antworten
    • Dennis
      schrieb am 11.01.2014 um 17:06 Uhr:

      Nervig, wenn es ständig dinge gibt, die keiner braucht. Es ist ratsam derartige Dinge einfach wegzulassen und wich auf das wesentliche zu konzentrieren. ich sehe schon zig Seiten die so was nur nutzen, weil es das gibt. völlig überflüssig.

      Antworten
      • Mo
        schrieb am 31.01.2014 um 10:41 Uhr:

        Aber das wesentliche funktioniert doch schon, warum also nicht Funktionen einbauen, die wir seit Jahren mit Workarounds und Tricks lösen..?

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →