CSS mix-blend-mode playground

Explore mix-blend-mode with high-contrast backdrops and an editable subject to see how it blends with the content behind it.

Blending

According to MDN, mix-blend-mode describes how an element content blends with the content behind it and with the element background.

mix-blend-mode

Isolate scene

isolation: isolate limits blending to the scene container so the element does not blend with external parts of the page.

Scene

Blend modes are easier to compare when the element crosses light, dark, and saturated areas of the backdrop.

Backdrop

Background color

Subject

Subject color

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;
}