5

What is the best way to do a text mask/clipping with the background that will be supported in all browsers? As you can see in the Codepen, I am trying to make the Text color white only where the red box is and the remaining part of the text will be black. Could you tell me which is the best way to do this effect that can be supported by all browsers. I have made a mock-up and attached for better understanding.

Thanks in Advance.

<div class="head">AWESOME TEST</div>
<div class="box"></div>

https://codepen.io/bootstrap007/pen/mdeYaeX

enter image description here

bootstrap
  • 73
  • 7

1 Answers1

2

You can use mix-blend-mode. View all the different attributes here and see which one best fits your needs. Here is an example

Zach P.
  • 342
  • 1
  • 10
  • this is not serving actual output. He need color to choose from css like if red then white else black – Avinash Dalvi May 27 '20 at 18:12
  • 1
    Thank you @Zach P for your time & suggestion. But I have tired this already and this is not what i am looking for. this is not serving actual output. He need color to choose from css like if red then white else black - aviboy2006 - Exactly, that is what i am looking for. Any examples Please? – bootstrap May 27 '20 at 18:23