Blend Modes Playground

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

1. Text + mix-blend-mode

Der Text mischt sich mit dem Hintergrund. Mode wechseln, Opacity ändern, Text ändern.

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. 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.