Michael Gearon

Introduction to CSS Blend Modes

Michael Gearon

Last updated on

CSS3 Pseudo Element

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

CSS Blend Mode Support

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.


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.


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]

Further Reading

This blog post provided a basic look at the CSS blend modes property, here is a list of useful links to read and understand more, also check out other examples on Codepen:

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects