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.

Presets

Choose a configuration as a starting point, then adjust any control.

BlendingAccording 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.

SceneBlend 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>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

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