Shared publicly  - 
Your browser is about to have a lot more in common with +Instagram!

From a recent presentation [1] on the state of web graphics given by Vincent Hardy of Adobe, it's clear that your browser is going to be able to do a lot more with graphics, text, fonts, and filters very soon.

In fact, the attached screenshot of a slide [2] from Vincent's talk was taken in Chrome 19 which, as you can see, already supports -webkit-filter [3], giving designers the ability to modify how visual elements appear without altering the source material.

Presuming these capabilities make it into the flotilla of popular browsers soon, it'll just be a matter of time before clever designers start to take advantage of them in interestingly expressive ways!


#html5 #css #webkit #filters #webdesign
Mahei Foliaki's profile photoLuke Cullinan's profile photoJason English's profile photoLiz Tufte's profile photo
Can't wait to see the next wave of web design innovation!
While I'm sure better filter/blend-mode support in browsers will bring us even more amazing experiments - (client-side) Instagram-like filters in the browser is not that hard to do even today. I've experimented with Filtrr JS/canvas library ( and found it more than up to the task (code here - There are also others like PaintbrushJS (, etc.
I can't tell if this is meant to be compatible with SVG filters. With inline SVG in html5 the filter element from SVG should already be available. Hopefully they're building in a compatible way.
+Rob Russell it is kinda compatible. However I still would prefer to see the back of SVG....
+Paul Kinlan people get pretty hung up on serialization. I'm surprised that makes it all the way in to standards bodies some times. There's a difference between the XML text that we see in source and the objects they represent. We didn't throw out the concepts of HTML to make html5 (after years of working on XHTML) and yet SVG gets tied to the XML that was the vogue serialization when it was invented.

SVG filters are rich and expressive. Shorthands for common filters are great. I hope these filters build on the same concepts and are informed with research in WebGL shaders as well.
+Marcus Sant'Anna Definitely not. Flash and HTML5 may be alternative choices for some tasks, but Adobe is not just Flash, and Adobe is working on a lot of HTML5 stuff.
Looks like big chunks of the spec do come straight from the SVG spec and talks about vertex shaders. This is really exciting.
Super cool. But...

.. why must they keep competing for the different css declarations??? "ms-filter...webkit-filter...moz-filter..." its a bit ridiculous. My stylesheets are often 2-3 times larger then I think they need to be if I want to take advantage of these different browser webkits. More importantly than size however is just the repetitive time it takes if I want to update one style I have to update it for 3 browsers. yawn
I guess google is trying to swiftboat facebook's buy of instagram. If Google can make instagram's filters obsolete, then facebook will have spend $1b for naught. (This interpretation discounts instagram's social and mobile experience which facebook also bought)
+Jacob Cigna — yeah, my personal opinion is that +Instagram isn't solely about the filters. And these browser-based filters aren't necessarily going to change the game that much — but they will lead to interesting visual effects when wielded by clever designers!
+Chris Messina W3 has been talking about filters to images for a long time and Microsoft had proprietary filters in Internet Explorer long before +Instagram ever came along.
Add a comment...