<div class="mix-blend-mode">
  <section>
    <div class="multiply">multiply</div>
  </section>
  <section>
    <div class="screen">screen</div>
  </section>
  <section>
    <div class="overlay">overlay</div>
  </section>
  <section>
    <div class="difference">difference</div>
  </section>
</div>
.multiply {
  mix-blend-mode: multiply;
}

.screen {
  mix-blend-mode: screen;
}

.overlay {
  mix-blend-mode: overlay;
}

.difference {
  mix-blend-mode: difference;
}

.mix-blend-mode {
  background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');
  background-color: #345;
  font-size: 10rem;
  color: #36b1bd;
}

section {
  min-height: 200vh;
}

.multiply,
.screen,
.overlay,
.difference {
  padding: 2rem 4rem;
  background: #5b55a1;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  margin-inline: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.