Understanding CSS Blend Modes

by Unknown | Sunday, October 05, 2014 | CSS 31 Comments

Most of us using image editing tools like Photoshop, illustrator, Sketch or GIMP, are already familiar with blend modes. Like the name suggest, blend modes provide a way to specify how one layer will interact or blend with another layer underneath. Until now, these software were the domain of photo editing, but now they are available on the web using CSS. In essence, these modes are mathematical functions, which use the mathematical representations of the colors of the source and background layers — for example RGBa, where values are between 0 and 1 for all the channels — and returns a final mathematical value for that particular pixel, which in the end, determines the color of that pixel. The exact formulas that each blend mode employs for determining colors can be read in the specification.

Right now, the specification supports three new properties, background-blend-mode, mix-blend-mode, and isolation.

Background blend mode

The CSS background-blend-mode property blends the backgrounds of an element: colors, images, and gradients, together with Photoshop-like blend modes (multiply, screen, overlay, etc).
Blending modes should be defined in the same order as the background-image CSS property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.

You can blend background-images together, or blend them with background-color like this;

.bg-blend {
background-image: url(sample.jpg);
background-color: blue;
background-blend-mode: multiply;
}

See the Pen background-blend-mode: blending image with color by Durodola Ridwan (@durodolaridwan) on CodePen.

You can also blend two background images, like so:

.bg-blend {
background-image: url(sample1.jpg), url(sample2.jpg);
background-blend-mode: multiply;
}

See the Pen background-blend-mode: blending two images by Durodola Ridwan (@durodolaridwan) on CodePen.

You can specify different effect for each image. It's as simple as:

.bg-blend {
background-image: url(sample1.jpg), url(sample2.jpg);
background-blend-mode: screen, normal;
}

In the above example, the image sample1.jpg will get the screen effect applied to it, while sample2.jpg will get no effect applied to it.

Here is another cutting-edge demo by Adobe Web Platform Team:

See the Pen CSS Element Background Blend Modes by Adobe Web Platform (@adobe) on CodePen.

background-blend-mode possible values include: multiple, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity and normal which indicates that no blending should happen.

Mix blend mode

Instead of blending only backgrounds, you might want to blend HTML and SVG elements like layers on a .psd, mix-blend-mode property is all you need.

The mix-blend-mode property specifies how an element mix colors with its backdrop. The backdrop could be any element underneath the source element. You could experiment with a header that utilizes the screen blend mode rather than a simple background color with rgba().

You can write something like:

h1 {
mix-blend-mode: overlay;
}

Here is a great demo by Chris Coyier:

See the Pen GxlBm by Chris Coyier (@chriscoyier) on CodePen.

If you apply mix-blend-mode to an element, the element content will blend with the content of the element that is below it and the element's background.

Isolation mode

Sometimes, you might not want to blend an element with is backdrop or element underneath, your choice might be to blend all element (let's says within a div container) together.

Setting isolation to isolate will turn the element into a stacking context, like:

div {
isolation: isolate;
}

In CSS, a background image or the content of an <img> must always be rendered into an isolated group. For instance, if you link to an SVG file through the <img> tag, the artwork of that SVG will not blend with the backdrop of the content.

Here's a demo page by Opera which make use of mix-blend-mode and isolation property.

SVG blend mode

In SVG, we can still use blend modes via feImage and feBlend, but it will make a whole lot of sense If we add it via CSS.

With the mix-blend-mode property, we can define how each element within the svg document interact with each other.

For example:

And the following style rule:

circle {
mix-blend-mode: multiply;
}

See the Pen SVG Blend Mode by Durodola Ridwan (@durodolaridwan) on CodePen.

The above code produces three overlapping circles, with each circle rendering from bottom to top. Where the elements overlap, the blend mode produces a change in color.

Canvas blend mode

To use blend modes in canvas, set the globalCompositeOperation property of the Context 2D Canvas, as follows:

var canvas = document . getElementById( 'canvas'
var ctx = canvas . getContext ( '2d' );
ctx .globalCompositeOperation = 'multiply' ;

After this block is executed, any graphic elements drawn on the canvas are blended using the multiply blend mode. You can also alter the opacity of the element with the globalAlpha property.

Below is a simple demo:

See the Pen Canvas Blend Mode by Durodola Ridwan (@durodolaridwan) on CodePen.

Here is another demo by Adobe Web Platform which is archived by drawing a red rectangle on top of the whole canvas, using the overlay blend mode:

See the Pen giLzm by Adobe Web Platform (@adobe) on CodePen.

CSS gradients

With the background-blend-mode property, we can create super cool CSS gradients. CSS gradients are completely resolution-independent and faster to modify than images. With performance considerations in mind, animations and transitions are possible through the background-size or background-position properties.

Bennett Feely have put in a lot of work to create some amazing CSS gradients. You can view the whole gradients here:

See the Pen CSS Gradients with background-blend-mode by Durodola Ridwan (@durodolaridwan) on CodePen.

Browser support

background-blend-mode CSS property is available Chrome 35+, Firefox (+mobile) 30+, Opera (+mobile) 22+, Safari 21+, iOS8+ and Android 4.4+. But not supported by IE.

mix-blend-mode CSS property is available in Firefox (+mobile) 32+, Safari (+mobile) 8+. In Chrome and Opera, it is behind an experimental features flag.

isolation CSS property is available in Safari. In Chrome and Opera, it is behind an experimental features flag, and not yet implemented in Firefox.

To enable support for CSS Blend Modes in Opera, type opera:flags in the address bar and enable the option: "Enable experimental Web Platform features" For Chrome, you need to enable the same option by going to chrome://flags.
While Firefox does not support isolation property, you can still enable other properties from the about:config section.

Feature detention

It's always a good idea to feature detect support for blend modes, likewise all other new CSS property. A tiny JavaScript that can handle this task is as follow:

var supportsMixBlendMode = window.getComputedStyle(document.body).mixBlendMode;
var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode;
var supportsIsolation = window.getComputedStyle(document.body).isolation;

The above code will return true if it detects support for it, and false otherwise.

Another great way of detecting support is to use a tool like Modernizr. You can learn more about its usage here. Also you can detect support with CSS @supports by writing code like:

@supports((mix-blend-mode: screen) and
(background-blend-mode: screen)) {
…
}

Other resources