Using mix-blend-mode to knock out a shape from it's parent, while keeping sibling text normal

Question

I have read tons of posts about folks trying to make this kind of shape and the best solution I have is to use mix-blend-mode:screen;. These posts were 5+ years old so I am hoping there is a new kind of solution.

However, I also need the text to not be impacted by the mix-blend-mode. I have tried isolation:isolate; in a wrapper <div>, but that didn't help since the circle just disappeared or wouldn't knockout the white container, just blended with it (yes I realize that's what it's supposed to do, just not what I need it to do). I have also tried to place the text in a separate <div> and use position:absolute; while that worked on desktop, it wasn't responsive and seems really hacky.

So, in short I need to make what I have below without impacting the text color on the content.

Any help is greatly appreciated.

.bg { 
  background: #666; 
  height: 100vh;
  padding: 50px;
}

.flag {
  background-color: white;
  mix-blend-mode: screen;
  height: auto;
  padding: 20px;
  width: 400px;
  overflow: hidden;
  position: relative;
}

.flag p {
  font-family: 'Helvetica Neue LT Std 47 Light Condensed',Helvetica,Arial,Lucida,sans-serif;
  color: #58595B!important;
  font-size: 16px;
}

.green {
    color: #B3BE35;
}

.flag-circle {
    background-color: black;
    border-radius: 50%;
    width: 175px;
    height: 165%;
    position: absolute;
    top: -32%;
    right: -150px;
}

<div class="bg">
  
  <div class="flag">
    <p>
      In this example <strong class="green">the text needs to be normal</strong> and the mix-blend-mode should only apply to the circle cutting out the right side of the "flag".
    </p>
    <div class="flag-circle"></div>
  </div>
  
</div>

doğukan · Accepted Answer · 2020-07-17T03:36:47.737

You can do this with radial-gradient and masking. No mix-blend-mode and extra element needed.

.bg {
  background: #666;
  height: 100vh;
  padding: 50px;
}

.flag {
  background-color: white;
  /* mix-blend-mode: screen; */
  height: auto;
  padding: 20px;
  width: 400px;
  overflow: hidden;
  position: relative;
  --mask: radial-gradient(circle at calc(100% + 60px) 50%, transparent 0 87.5px, red 88.5px 100%) 0 0/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.flag p {
  font-family: 'Helvetica Neue LT Std 47 Light Condensed', Helvetica, Arial, Lucida, sans-serif;
  color: #58595B!important;
  font-size: 16px;
}

.green {
  color: #B3BE35;
}

<div class="bg">
  <div class="flag">
    <p>
      In this example <strong class="green">the text needs to be normal</strong> and the mix-blend-mode should only apply to the circle cutting out the right side of the "flag".
    </p>
  </div>
  </div

With a background image:

.bg {
  background: url("https://picsum.photos/536/354") 50% 50%/cover;
  height: 100vh;
  padding: 50px;
}

.flag {
  background-color: white;
  /* mix-blend-mode: screen; */
  height: auto;
  padding: 20px;
  width: 400px;
  overflow: hidden;
  position: relative;
  --mask:radial-gradient(circle at calc(100% + 60px) 50%,  transparent 0 87.5px, red 88.5px 100%) 0 0/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.flag p {
  font-family: 'Helvetica Neue LT Std 47 Light Condensed', Helvetica, Arial, Lucida, sans-serif;
  color: #58595B!important;
  font-size: 16px;
}

.green {
  color: #B3BE35;
}

<div class="bg">
  <div class="flag">
    <p>
      In this example <strong class="green">the text needs to be normal</strong> and the mix-blend-mode should only apply to the circle cutting out the right side of the "flag".
    </p>
  </div>
  </div

thank you for that. I did come across that kind of solution in my search, however the issue is that I can't make that section transparent as needed so that the background can be seen, not just a color match. Especially if I put this over a hero image for example. Any ideas for a solution for that? — Iisrael, Jul 17 '20 at 03:18

Using mix-blend-mode to knock out a shape from it's parent, while keeping sibling text normal

1 Answers1