BaselineLab

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.

BLEND
HTML 
<div class="blend-scene">
  <div class="blend-subject">BLEND</div>
</div>
CSS 
.blend-scene {
  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;
}