CSS Blend Mode Explorer

Explore all 16 CSS blend modes with live preview. Understand mix-blend-mode and background-blend-mode.

Layer Configuration

Bottom Layer (Base)

Top Layer (Blend)

multiply

Darkens by multiplying colors. Black stays black, white is transparent.

mix-blend-mode Preview

multiply

All Blend Modes at a Glance

mix-blend-mode CSS

.parent {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.child {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  mix-blend-mode: multiply;
}

background-blend-mode CSS

.element {
  background: linear-gradient(135deg, #4facfe, #00f2fe), linear-gradient(135deg, #667eea, #764ba2);
  background-blend-mode: multiply;
}