CSS Blend Modes provide a way to specify how one layer will interact or “blend” with the one underneath. Until now, this was the domain of photo editing applications, but now they are available on the web using CSS itself!
What are CSS Blend Modes
If you have ever used a photo editing application extensively (like for example, Adobe Photoshop,Pixelmator, GIMP, etc.) then you might be familiar with Blend Modes. Like the name suggests, Blend Modes are various modes by which the one image will blend into the image underneath. Depending on the mode you choose, you will get different results with different effects.
These Blend Modes are now available in CSS as well via the Compositing and Blending Level 1specification. Blend Modes are used to determine how a particular color will blend into the background layer’s color. The results can be very interesting indeed.