🎨 Blend Mode Layering Test

Normale Farbe + Blend-Effekt darüber kombinieren

⚠️ Wichtig: Blend Modes brauchen einen Hintergrund zum Mischen! Wähle unten verschiedene Hintergründe aus um den Effekt zu sehen.
Tipp: Dunkle/farbige Hintergründe zeigen den Effekt am besten!

🖼️ Hintergrund wählen (WICHTIG für Blend-Effekt!)

Weiß
Grau
Dunkel ⭐
Yang
Bian
Yin
Fluur
Warm Gradient
Cool Gradient
Purple Gradient
Muster

Methode 1: Pseudo-Element (::after) ⭐ Empfohlen

Wie es funktioniert: Das Widget hat seine normale Farbe. Ein ::after Pseudo-Element liegt darüber mit dem Blend Mode. Sauberste Lösung, kein extra HTML nötig.
yang Yang Widget
bian Bian Widget
yin Yin Widget
fluur Fluur Widget
.widget { position: relative; background: hsla(50, 90%, 65%, 0.3); /* Normale Farbe */ } .widget::after { content: ''; position: absolute; inset: 0; /* top/right/bottom/left: 0 */ background: inherit; /* Kopiert Widget-Farbe */ mix-blend-mode: multiply; opacity: 0.5; pointer-events: none; border-radius: inherit; } /* Container braucht Hintergrund für Blend-Effekt! */ .dashboard-container { background: #2c3e50; /* Oder Gradient, Bild, etc. */ }

Methode 2: Verschachteltes Div

Wie es funktioniert: Zwei separate <div> Elemente - eins für die Basis-Farbe, eins für den Blend-Layer. Mehr Kontrolle, aber mehr HTML.
yang
Yang Widget
bian
Bian Widget
yin
Yin Widget
fluur
Fluur Widget
<!-- HTML --> <div class="widget-container"> <div class="widget-base">Inhalt</div> <div class="blend-layer"></div> </div> /* CSS */ .widget-base { background: hsla(50, 90%, 65%, 0.3); } .blend-layer { position: absolute; inset: 0; background: inherit; mix-blend-mode: overlay; opacity: 0.4; pointer-events: none; }

Methode 3: Background-Blend-Mode

Wie es funktioniert: Zwei Background-Gradients übereinander mit background-blend-mode. Funktioniert nur für Hintergründe, nicht für Content.
yang Yang Widget
bian Bian Widget
yin Yin Widget
fluur Fluur Widget
.widget { background-image: linear-gradient(...), /* Layer 1 */ linear-gradient(...); /* Layer 2 */ background-blend-mode: soft-light, normal; }