Playground de mix-blend-mode en CSS

Explora mix-blend-mode con fondos de alto contraste y un elemento editable para ver cómo se mezcla con el contenido que tiene detrás.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

MezclaSegún MDN, mix-blend-mode describe cómo el contenido de un elemento se mezcla con el contenido que hay detrás y con el fondo del elemento.

mix-blend-mode

Aislar escena

isolation: isolate limita la mezcla al contenedor de la escena para que el elemento no se mezcle con partes externas de la página.

EscenaLos modos de mezcla se aprecian mejor cuando el elemento cruza zonas claras, oscuras y saturadas del fondo.

Fondo

Color de fondo

Elemento

Color del elemento

BLEND

HTML

<div class="blend-scene">
  <div class="blend-subject">BLEND</div>
</div>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<div class="grid place-items-center min-block-80 [background-color:rgb(from_#0f172a_r_g_b_/_88%)] [background-image:radial-gradient(circle_at_22%_18%,_rgb(125_211_252_/_88%)_0_18%,_transparent_19%),_radial-gradient(circle_at_78%_28%,_rgb(240_171_252_/_88%)_0_20%,_transparent_21%),_radial-gradient(circle_at_50%_82%,_rgb(134_239_172_/_88%)_0_24%,_transparent_25%)] isolate">
  <div class="mix-blend-difference text-[rgb(from_#ffffff_r_g_b_/_88%)] text-[6rem]">BLEND</div>
</div>

CSS

.blend-scene {
  display: grid;
  place-items: center;
  min-block-size: 20rem;
  background-color: rgb(from #0f172a r g b / 88%);
  background-image: radial-gradient(circle at 22% 18%, rgb(125 211 252 / 88%) 0 18%, transparent 19%), radial-gradient(circle at 78% 28%, rgb(240 171 252 / 88%) 0 20%, transparent 21%), radial-gradient(circle at 50% 82%, rgb(134 239 172 / 88%) 0 24%, transparent 25%);
  isolation: isolate;
}

.blend-subject {
  mix-blend-mode: difference;
  color: rgb(from #ffffff r g b / 88%);
  font-size: 6rem;
}

.blend-scene {
  display: grid;
  place-items: center;
  min-block-size: 20rem;
  background-color: rgb(from #0f172a r g b / 88%);
  background-image: radial-gradient(circle at 22% 18%, rgb(125 211 252 / 88%) 0 18%, transparent 19%), radial-gradient(circle at 78% 28%, rgb(240 171 252 / 88%) 0 20%, transparent 21%), radial-gradient(circle at 50% 82%, rgb(134 239 172 / 88%) 0 24%, transparent 25%);
  isolation: isolate;

  .blend-subject {
    mix-blend-mode: difference;
    color: rgb(from #ffffff r g b / 88%);
    font-size: 6rem;
  }
}