Einführung in CSS Blend Modes

CSS Blend Modes ermöglichen es, die Pixel von zwei oder mehr übereinanderliegenden Ebenen (z.B. Bilder, Farbverläufe oder HTML-Elemente) miteinander zu vermischen, um visuelle Effekte zu erzeugen, die man sonst nur aus Bildbearbeitungsprogrammen wie Photoshop kennt.

Es gibt zwei Haupteigenschaften für das Mischen: background-blend-mode und mix-blend-mode.

1. background-blend-mode

Diese Eigenschaft definiert, wie die Hintergrundebenen eines Elements (Hintergrundbilder und/oder Hintergrundfarben) miteinander vermischt werden.

Beispiel: Bild mit einem Farbverlauf mischen

.element {
  background-image:
    /* Ebene 1: Ein Farbverlauf */
    linear-gradient(to right, #ff8a00, #e52e71),
    /* Ebene 2: Ein Hintergrundbild */
    url("bild.jpg");
  
  background-size: cover;
  
  /* Definiert den Mischmodus zwischen den Hintergrundebenen */
  background-blend-mode: multiply;
}

In diesem Beispiel werden die Pixel des Farbverlaufs mit den Pixeln des Bildes multipliziert, was einen farbigen Tönungseffekt erzeugt.

2. mix-blend-mode

Diese Eigenschaft geht einen Schritt weiter und definiert, wie der gesamte Inhalt eines Elements mit den darunterliegenden Elementen vermischt wird.

Beispiel: Text über einem Bild hervorheben Der screen-Modus hellt die Farben auf und ist nützlich, um dunklen Text auf einem dunklen Bild lesbarer zu machen oder um kreative Effekte zu erzielen.

<div className="container">
  <img src="dunkles-bild.jpg" alt="">
  <h1 className="headline">Titeltext</h1>
</div>

.container {
  position: relative;
}

.headline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 5rem;
  
  /* Mischt den weißen Text mit dem darunterliegenden Bild */
  mix-blend-mode: screen;
}

3. Gängige Blend-Mode-Werte

Obwohl es 16 verschiedene Werte gibt, sind die folgenden am gebräuchlichsten:

Fazit

CSS Blend Modes sind ein mächtiges Werkzeug für kreatives Webdesign. Sie ermöglichen komplexe visuelle Effekte direkt im Browser, ohne dass Bildbearbeitungssoftware erforderlich ist. background-blend-mode ist ideal für Texturen und Farbüberlagerungen auf Hintergründen, während mix-blend-mode das Mischen ganzer HTML-Elemente für eindrucksvolle Layouts ermöglicht.