CODEWITHSUNDEEP
htmlcssmix-blend-mode
Gretie
Gretie

Reputation: 31

Isolation with CSS Mix-Blend-Modes: how to prevent elements from blending with parent

I have tried this a lot of different ways, and cannot make it so that the .pink and .green divs blend with one another, but not the background color of the parent element, .wrapper.

.wrapper {
  background-color: blue;
  height: 100vh;
  width: 100%;
  isolation: isolate;
}

.pink {
  background: hotpink;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 10%;
  mix-blend-mode: multiply;
}

.green {
  background: limegreen;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 10%;
  mix-blend-mode: multiply;
}
<div class="wrapper">
  <div class="pink"></div>
  <div class="green"></div>
</div>

Or, see the fiddle: https://jsfiddle.net/grettynebraska/9dr6vspy/5/#&togetherjs=breFHFSfEd

My goal is simply to have a pink and green div that blend with eachother, and live atop a black background, with whom they do not blend.

I tried using absolute position, and sitting the pink/green divs and the wrapper next to one another, as siblings. However, all elements still blended.

Upvotes: 3

Views: 4515

Answers (1)

Temani Afif
Temani Afif

Reputation: 274385

I would consdier an extra wrapper where you set a z-index in order to create a staking context thus the element will no more blend with the blue element:

.wrapper {
  background-color: blue;
  height: 100vh;
  width: 100%;
}
.wrapper > div {
  position:absolute;
  height: 100vh;
  left:0;
  right:0;
  z-index:0;
  top:0;
}

.pink {
  background: hotpink;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 10%;
  mix-blend-mode: multiply;
}

.green {
  background: limegreen;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 10%;
  mix-blend-mode: multiply;
}
<div class="wrapper">
  <div>
    <div class="pink"></div>
    <div class="green"></div>
  </div>
</div>

Everything in CSS that creates a stacking context must be considered an ‘isolated’ group. HTML elements themselves should not create groups.

An element that has blending applied, must blend with all the underlying content of the stacking context [CSS21] that that element belongs to. ref

So the main trick is to have the elements in a stacking context where the blue element doesn't belong. If the wrapper element is their direct parent element it won't be trivial to make them in different stacking context thus the need of an extra wrapper.

Isolation won't help you, because it will simply make the wrapper creating a stacking context, so it won't isolate the wrapper from its child but from all the elements outside. if you apply it to the extra wrapper it will work exactly like setting z-index or any other property that create a stacking context.

.wrapper {
  background-color: blue;
  height: 100vh;
  width: 100%;
}
.wrapper > div {
  position:absolute;
  height: 100vh;
  left:0;
  right:0;
  isolation:isolate;
  top:0;
}

.pink {
  background: hotpink;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 10%;
  mix-blend-mode: multiply;
}

.green {
  background: limegreen;
  height: 80%;
  width: 50%;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 10%;
  mix-blend-mode: multiply;
}
<div class="wrapper">
  <div>
    <div class="pink"></div>
    <div class="green"></div>
  </div>
</div>

Upvotes: 4

Related Questions