Notes

CSS Blend Modes

Edit on GitHub

CSS & Sass

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.

background-blend-mode

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}

mix-blend-mode

Blends the content of any HTML or SVG element.