title: How to add composite css -webkit-mask-image?
body: <p>My requirement is to add a mask on top of a div with all the region to have 50% transparency, except a small window in that div which should be 100% opaque.</p>
  
  <p>-by 100% opaque i meant, the content should be fully visible without any mask on that area.</p>
  
  <p>I am also attaching an image mentioning what i am trying to achieve.</p>
  
  <p>I have tried below mentioned mask, but it didn't work out:</p>
  
  <pre><code>-webkit-mask-composite: source-over;
  -webkit-mask-image:
      -webkit-linear-gradient(
  
          left,
          rgba(0,0,0,1) 0 ,
          rgba(0,0,0,1) 100px ,
          rgba(0,0,0,0.5) 100px , 
          rgba(0,0,0,0.5) 300px 
  
      ),
      -webkit-linear-gradient(
  
          top,
          rgba(0,0,0,0.5) 0 ,
          rgba(0,0,0,0.5) 50px,
          rgba(0,0,0,1) 50px,
          rgba(0,0,0,1) 100px,
          rgba(0,0,0,0.5) 100px,
          rgba(0,0,0,0.5) 150px 
      )
  ;"
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/TnNa7.png" alt="Image sowing the requirements"></p>