Adobe wants the next Instagram to be a web app. The company is hard at work porting filters and effects from Photoshop to the web. The latest experimental builds of both Chrome and Safari add support for the company’s proposed CSS fragment shaders — think Photoshop blending modes like multiply or overlay right in your browser.Chrome’s experimental Canary channel and Safari’s WebKit nightly builds both now support all of the Photoshop-inspired blend modes for CSS Shaders, part of Adobe’s effort to bring Photoshop-style filter tools to the web.To see the new blend modes in action, grab a copy of the latest Chrome Canary or WebKit nightly builds, enable the CSS Shaders option in about:flags and point your browser to Adobe’s sample code over on Codepen. Previously, CSS Shaders required a special build of WebKit [Update: As Adobe’s Alan Greenblatt points out in the comments, CSS shader support has been in Chrome stable since v25 (you still need to enable the flag). But if you want to play around with these new blend modes then you’ll need Canary (or a WebKit nightly).]The new blend mode support is part of Adobe’s CSS Shaders proposal, which recently became part of the W3C’s CSS Filter Effects specification. There are two types of shaders in the spec, CSS fragment shaders, which provide features similar to what Photoshop’s blending modes offer, and CSS vertex shaders, which handle the 3D animation filters we’ve showcased in the past.The blending modes currently available include all the familiar options you’ll find in Adobe Photoshop, such as multiply, screen, overlay, luminosity and other photographer favorites.
For more details and links to the corresponding specs, be sure to check out this post from Max Vujovic, who is working on the CSS Filters implementation in WebKit and Blink.