Web Platform Team Blog

Adobe

decor

Making the web awesome

CSS Background Blend Modes are now available in Chrome Canary and WebKit Nightly

As part of the CSS Blending and Compositing specification, HTML background blending allows blending of images, gradients and background colors directly from CSS.

Let’s say we have an html element with the following:

#dummy_element { 
  background: url('azure_by_kurokitsune777.png') no-repeat, blue; 
}

We can now use CSS to blend the background layers of the element (the specified image and the background color) as follows:
#dummy_element {
 background: url('azure_by_kurokitsune777.png') no-repeat, blue;
 background-blend-mode: difference, normal; // Chrome Canary
 -webkit-background-blend-mode: difference, normal; // WebKit Nightly
}

You can see how the difference blend mode is applied between the background image and the background color for the element on the right:

The feature was recently added to the Blink rendering engine, used by Chrome, and also to WebKit, the rendering engine used by Safari.

Here are the steps to see it in action:

For Chrome Canary

  1. Download and install Chrome Canary from this location.
  2. Learn how to enable flags in Canary to view Background Blend Modes.

For WebKit Nightly

CSS Background Blending is turned on by default in WebKit Nightly, so all you have to do is to download a build from nightly.webkit.org.

Once you’ve completed these steps, you can see the feature in action with this codepen that showcases all of the supported background blend modes.

Don’t forget to share your demos and thoughts on this feature!

Comments are closed.