Introduction to CSS Blend Modes

Michael Gearon

Last updated on July 7, 2021

CSS blend modes is currently a W3C Candidate recommendation. The use of blending has been a common practise in static designs but with the use of CSS blend modes it will soon be possible to apply blending to dynamic content. Blending is when one image will blend into the image underneath, using different choices will produce different results. This post will be a brief introduction to CSS blend modes, and links to further reading.

Browser Support

At the moment the browser support is as followed:

Internet Explorer: Not Supported
Firefox: 30 upwards
Chrome: 35 upwards
Safari: 8
Opera: 22 upwards

To experiment in Chrome you will have to Chrome Canary and then go to chrome://flags/ and enable “experimental Web Platform features”. It is also possible to experiment in Safari Yosemite edition.

To keep up to date with support then bookmark this link: Can I Use CSS Blend Modes

How does it work

Mix Blend Mode Property

The mix-blend-mode property has the the following values for blend modes:
Multiply, screen, overlay, darken, lighten, color-dodge, color burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity and also normal blend mode which resets it because it specifies no blending.

Isolation property

Using the mix blend mode will blend with all elements in the backdrop that overlays it, but if you wanted it to only blend with certain elements then this would be possible using the isolation property.

Background-blend-mode

The background-blend-mode property defines the blending mode of each background layer. By applying this property it will blend with the element’s background layer that is beneath it, and the element’s background color.

Other possibilities

It is also possible to use blend modes in the canvas SVG, and videos.

Demonstration

This is a basic code pen that demonstrates the ability of CSS Blend Modes:
[codepen_embed height=”300″ theme_id=”light” default_tab=”css,result” slug_hash=”kpiEG” user=”michaelgearon”]See the Pen
CSS Blend Modes by Michael Gearon (@michaelgearon)
on CodePen.[/codepen_embed]

Written by