Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

mix-blend-mode

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
mix-blend-normal mix-blend-mode: normal;
mix-blend-multiply mix-blend-mode: multiply;
mix-blend-screen mix-blend-mode: screen;
mix-blend-overlay mix-blend-mode: overlay;
mix-blend-darken mix-blend-mode: darken;
mix-blend-lighten mix-blend-mode: lighten;
mix-blend-color-dodge mix-blend-mode: color-dodge;
mix-blend-color-burn mix-blend-mode: color-burn;
mix-blend-hard-light mix-blend-mode: hard-light;
mix-blend-soft-light mix-blend-mode: soft-light;
mix-blend-difference mix-blend-mode: difference;
mix-blend-exclusion mix-blend-mode: exclusion;
mix-blend-hue mix-blend-mode: hue;
mix-blend-saturation mix-blend-mode: saturation;
mix-blend-color mix-blend-mode: color;
mix-blend-luminosity mix-blend-mode: luminosity;
mix-blend-plus-darker mix-blend-mode: plus-darker;
mix-blend-plus-lighter mix-blend-mode: plus-lighter;

Examples#

Basic example#

Use utilities like mix-blend-overlay and mix-blend-soft-light to control how an element's content and background is blended with other content in the same stacking context:

{

}

<!-- [!code classes:mix-blend-multiply] -->
<div class="flex justify-center -space-x-14">
  <div class="bg-blue-500 mix-blend-multiply ..."></div>
  <div class="bg-pink-500 mix-blend-multiply ..."></div>
</div>

Isolating blending#

Use the isolate utility on the parent element to create a new stacking context and prevent blending with content behind it:

{ 

  <div className="col-start-1 row-start-1 grid grid-cols-2 px-0 py-12 sm:px-16">
    <div className="isolate flex justify-center -space-x-14">
      <div className="size-24 rounded-full bg-yellow-500 mix-blend-multiply"></div>
      <div className="size-24 rounded-full bg-green-500 mix-blend-multiply"></div>
    </div>
    <div className="flex justify-center -space-x-14">
      <div className="size-24 rounded-full bg-yellow-500 mix-blend-multiply"></div>
      <div className="size-24 rounded-full bg-green-500 mix-blend-multiply"></div>
    </div>
  </div>
</div>

}

<!-- [!code classes:mix-blend-multiply,isolate] -->
<div class="isolate flex justify-center -space-x-14">
  <div class="bg-yellow-500 mix-blend-multiply ..."></div>
  <div class="bg-green-500 mix-blend-multiply ..."></div>
</div>

<div class="flex justify-center -space-x-14">
  <div class="bg-yellow-500 mix-blend-multiply ..."></div>
  <div class="bg-green-500 mix-blend-multiply ..."></div>
</div>

Responsive design#