Adobe

decor

Web Platform Team Blog

Making the web awesome

Blending HTML elements in Safari and Firefox

In June 2014 at the Worldwide Developer Conference, Apple announced that Safari 8 would ship with support for CSS Blending. With the recent release of iOS 8, you can now use blend modes on your Apple mobile devices! OS X Mavericks users who update Safari to version 7.1 can also start experimenting with this new feature. And this is not the only good news: Firefox recently enabled the mix-blend-mode CSS property by default in version 32, released on September 2, 2014.

wp-blendmodes

Safari and Firefox are the first browsers to ship the CSS Blending feature! These implementations are based on the CSS Blending specification – which has reached W3C Candidate Recommendation status. There are a few remaining work items to be completed in these two browsers: the non-separable blend modes in Safari and the CSS isolation property in Firefox.

Chromium also has a complete implementation of the CSS Blending specification: the background-blend-mode property is supported by default, while mix-blend-mode and the CSS isolation property are available behind the experimental features runtime flag. You can play with the full implementation of blend modes in Chromium-based browsers (Chrome and Opera) by enabling this flag.

Want to know more about CSS Blending? The Adobe Web Platform Team’s website contains additional information about this feature, along with a list of useful resources that will allow you to create compelling visual effects using blend modes.

Please share your thoughts and experiences regarding CSS Blending in the comments here, or on Twitter.

Happy Blending!

Comments are closed.