Takeflight - Web design and web development

Fudging masks using CSS blend modes

One of the features I'm super excited about is masking using SVGs. But the limited support for masking or applying SVG filters to HTML elements meant having to turn any text or images into SVG instead of HTML. Which I'm not a fan of.

Then I started spending some time with blend modes and found I could achieve many of the masks I needed using them instead. The idea is fairly simple. Use a combination of the darken and lighten blend modes along with black and white shapes made using plain css to mask off sections of one html element and let layers below them become visible.

It's worth pointing out that you can achieve the same effect exhibited here with better browser support using clip-path - thanks @SaraSoueidan  for pointing this out. BUT if you want to use text as part of your mask that means putting it in an external SVG file. This method allows you to keep it in the main HTML document - where it belongs ;)

You've been warned. In lieu of this being useful, see it as an interesting hack.

Read more