title: CSS Greyscale Masking
body: <p>I am wondering if it would be possible to partially mask an object in CSS with greyscale. I could do this with images, although it would be quite difficult to make an image for 10% greyscale, 11% greyscale, etc.</p>
  
  <p>default left, right 90% greyscale:</p>
  
  <p><a href="https://i.stack.imgur.com/08h6Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/08h6Q.png" alt="Default"></a></p>
  
  <p>An example of what I'm looking to do (This would represent 50% greyscale mask):</p>
  
  <p><a href="https://i.stack.imgur.com/tRz2G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tRz2G.png" alt="enter image description here"></a></p>