CSS Blend Modes let you blend two or more layers together to create visual effects. You can use blend-modes on pretty much an HTML element including text, svg, images, and videos.
Default value is normal, meaning no blending. There are 16 values for background-blend-mode including darken, lighten, multiply, overlay, screen,soft-light, color-burn and color-dodge. These blend modes are pretty much the same as what comes with Photoshop and Sketch.
Combining blend modes with gradients, you can create some cool Instagram-like retro filters.
1body {
2 background: url('image.jpeg') no-repeat, radial-gradient(#6de590, #e67478);
3 background-blend-mode: multiply;
4}
Blends the content of any HTML or SVG element.