<div class="container">
  <H1>Blend Effects CSS</H1>   
</div>

body{
  margin:0;
  padding:0;
}
.container{ background:url('https://images.unsplash.com/photo-1528092744838-b91de0a10615?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80') no-repeat center center fixed;
  height:100vh;
  width:100%;
}


.container h1{
  text-align:center;
  position:absolute;
  background-color:#ddd;
  color: #000;
  width:auto;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:9ch;
  padding:20px;
  
  
  /*This line here is making effect*/
  mix-blend-mode:screen;
  /*Try More like - multiply, overlay, darken, lighten, luminosity, etc... */


}