Cutting text effect with CSS

As a web developer we all know that CSS is major key part of web and most of us know very well CSS, but here I am going to share some secrets of CSS which mostly we are not familiar or not using much.

mix-blend-mode

Most of us are using blend mode in photoshop usually, CSS also offer this property

h1 {
  background: #f06;
  color: #000;
  mix-blend-mode: multiply;
}

Here is the result, here you can see cutting text effect too, someone can say that we can acheive this by “opacity”, but with opacity it will dull the background and text and there will be no cutting text effect with CSS