Adobe

decor

Web Platform Team Blog

Making the web awesome

background-blend-mode now available on Chrome

The Adobe web platform team has been working on the CSS Blending specification. On February 20, the spec progressed to the “release candidate” stage which signals that it is ready for implementation. At the same time, we’ve been implementing the CSS properties in Chrome, Firefox and WebKit.

The first CSS property of this specification to ship to the general public is background-blend-mode.
This property allows a user to blend background images with both one another as well as the background color. The background images and color will not blend with the background of the element itself. Instead, the blending is isolated to the content within the background.

The latest release of Chrome (version 35) on desktop and mobile now comes with support for the background-blend-mode property. If you’re using Chrome, this means that this feature is available for you today.

This new property will also be released in Firefox 30 which is currently scheduled for early June and in Opera 22.
We updated caniuse.com so you know what browser version supports this new feature.

We gathered a collection of CodePens that show how you can use this new property.
The following example was created by Bennett Feely:

Check out this Pen!

In addition to background blending, the more powerful mix-blend-mode property is also on its way. Firefox 31 will be the first browser to ship this new feature.
If you want to experiment with element blending today, the current Opera, Chrome and Firefox builds have experimental support.

To enable in Chrome or Opera:

  1. Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter.
  2. Click the ‘Enable’ link within that section.
  3. Click the ‘Relaunch Now’ button at the bottom of the browser window.

Turning on the experimental features flag in Opera will also enable support for background-blend-mode, which will be enabled by default in Opera 22.

To enable in Firefox:

  1. Copy and paste about:config into the address bar, then press enter.
  2. Click on ‘I’ll be carefull, I promise!’.
  3. Enter ‘Blend’ in the search field, then press enter.
  4. Set the value of ‘layout.css.mix-blend-mode’ to ‘true’.
  5. Restart Firefox.

The WebKit nightly builds also have complete support for background-blend-mode and mix-blend-mode.

Here is a small example that shows element blending in combination with CSS animations:

Check out this Pen!

If you need some inspiration, check out some of our previous posts on blend modes.
Our friends from Opera also just released a great article on blending. Check it out here for a tutorial and some awesome examples. They even provided a feature detection extension to Modernizr!

Let us know if you run into any issues. You can contact us on the comment section or Twitter at ‘@adobeweb’!
Also, demos are always welcome :-)

Comments are closed.