Effect

Mix Blend Mode

Utilities for controlling how an element should blend with the background.

Basic usage

Setting an element's blend mode

Use the mix-blend-{mode} utilities to control how an element's content should be blended with the background.

<div className="flex justify-center -space-x-14">
  <div className="**mix-blend-multiply** bg-blue-400 ..."></div>
  <div className="**mix-blend-multiply** bg-pink-400 ..."></div>
</div>