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.
[CodePen height=450 show=result href=rxoAc user=bennettfeely ]
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:
- Copy and paste
chrome://flags/#enable-experimental-web-platform-featuresinto the address bar, then press enter.
- Click the ‘Enable’ link within that section.
- 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:
- Copy and paste
about:configinto the address bar, then press enter.
- Click on ‘I’ll be carefull, I promise!’.
- Enter ‘Blend’ in the search field, then press enter.
- Set the value of ‘layout.css.mix-blend-mode’ to ‘true’.
- Restart Firefox.
Here is a small example that shows element blending in combination with CSS animations:
[CodePen height=850 show=result href=/LplJi user=adobe]
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!