Playground – Blend Mode Mixer

Diese Seite ist eine interaktive Ergänzung zur Lektion: mix-blend-mode, background-blend-mode und isolation.

1. Text auf einem Bild

Der Text wird mit dem Hintergrundbild verrechnet.

2. Überlappende Shapes + mix-blend-mode

Hier sieht man besonders gut, wie neue Farben in der Überlappung entstehen.

3. background-blend-mode (nur innerhalb eines Elements)

Mehrere Background-Layer (Gradient + Muster + Basis) werden miteinander gemischt.

4. Zwei Bilder mischen

Ein transparentes PNG liegt über einem Foto. Mit background-blend-mode werden beide Hintergrundbilder miteinander verrechnet.

5. isolation: isolate verstehen

Links blendet der Text „normal“ mit dem Hintergrund. Rechts ist der Parent isoliert. Toggle an/aus, um den Unterschied zu sehen.

Hinweis: Einige Modi wirken je nach Hintergrund sehr unterschiedlich. Probiere z. B. difference, overlay, screen und multiply.