title: Blending 2 elements background colors using CSS
body: <p>I need to blend the background colors of 2 elements using CSS
  I have been fiddling around with the <code>background-blend-mode:multiply</code> but that works only when I have the 2 colors in the same element.</p>
  
  <p>I need to achieve something like this -</p>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/vUTFZ.jpg" alt="enter image description here"></p>
  
  <p>I have been searching a lot but haven't been able to figure it out.
  Most helpful resource I found was <a href="https://web.archive.org/web/20170825054500/http://blogs.adobe.com/webplatform/2012/07/17/new-blending-features-in-css/" rel="nofollow noreferrer">New blending features in CSS</a> which shows how to do it using Canvas.
  Is it possible to do the same thing using CSS?</p>
  
  <p><strong>EDIT</strong></p>
  
  <hr>
  
  <p>The circles above were just an example to show what I needed. As I mentioned, I was looking for blending colors for 2 different elements. I have created a fiddle for my actual shapes that I need to blend. 
  <a href="http://jsfiddle.net/fmgfsr4o/2/" rel="nofollow noreferrer">http://jsfiddle.net/fmgfsr4o/2/</a></p>