CSS shaders: Hell yeah.

“Flash’ll be dead soon,” I thought. “Web browsers will add animation support, plus live filters, and let me mix it all together on a page.”

That was back in 1999.

HTML animation is progressing, but it still lacks much of the richness that Flash Player can provide. So, what can we do about it?

Adobe’s contributing technology & expertise to enable CSS shaders. CSS shaders “define a filter effects extensibility mechanism and provide rich, easily animated visual effects to all HTML5 content.” They work particularly well with CSS animations and CSS transitions, but they even work on video & SVG animations. Check it out:


So, yeah: Adobe’s using Flash-derived technology to make HTML5 more competitive with Flash.

Crazy, right? Not at all: this increases your ability to present visually rich experiences, and that increases Adobe’s ability to sell you tools for creating those experiences.  The different playback technologies are just means to those ends.

Adobe has collaborated with Apple & Opera and has now submitted the spec to the W3C. The code is checked into WebKit under consideration for inclusion in WebKit, with this demo recorded using a build of Chromium. In addition Microsoft has added support for SVG filters in the IE10 platform preview. [Update: IE10 supports SVG filters, but it doesn’t support Filter Effects on HTML or CSS shaders.] For details, sample code, etc., check out this post from Vincent Hardy.

Exciting times.

27 thoughts on “CSS shaders: Hell yeah.

  1. This is exactly the thought and logic that I told my students about this last class: Adobe sells Tools and while Flash Player may have become the focus for some (inside and outside of Adobe), the past present and future of Adobe is wrapped up in the tools.. not the output format. Flash is a power tool. That power tool might start putting out some high quality HTML5 one day soon, alongside SWF files.

  2. this is the way you do it Adobe! Hat’s off. ” The different playback technologies are just means to those ends.” I knew you guys would come around.
    [Thanks, though in fairness, Adobe’s been selling HTML tools since the 90’s. Flash succeeded as a runtime because it moved much faster than the browsers did. (Seriously, it took Microsoft 10 years longer than I expected to add SVG support.) Browsers are moving faster now, and that’s very good news for everyone. –J.]

      1. Presumably, you’re the first one.
        Congratulations to Adobe on putting its full weight behind HTML ecosystem. Flash has served us well in the past and will continue to serve for quite some time – audio/video capture/processing/synthesis comes to mind – but eventually it will fade away. Time to move on, which is exactly what Adobe is doing. As the next technological contribution, may I suggest Adobe promotes an efficient binary format for vector animation in HTML. CSS Animations are no good for serious stuff, and recent solutions that parse SWFs in JavaScript are just too over-the-top technologically. If your baby is going to get killed anyway, why not do it yourself?

  3. Fabulous. I want to see more of this.
    Flash really does need to die. It’s buggy, a resource hog and kills battery life on portables. Worse, it’s not even a true Adobe product. You bought it.
    Focus on what Adobe has always been good at selling great design tools.

  4. The code isn’t checked into WebKit. As you say, the demos work on a build of Chromium – but it is an internal Adobe build.
    [Ah, sorry! I don’t have a perfect grasp on how work flows from one branch to another. Thanks for the info; I’ll correct the post. –J.]
    Work is underway to support filters (of which this is a subset) in WebKit, but there is nothing yet to support the custom/shader variant. Hopefully soon!
    [Godspeed. 🙂 –J.]

  5. Great to see Adobe doing what Adobe does best. Flash was a fine stopgap while HTML caught up, but it’s good to see you guys making the transition now that you can.
    [I don’t see it as either/or; I see it as a pragmatic way to upgrade viewing abilities across devices. Sometimes Flash will make sense, sometimes HTML, and many times both. –J.]

  6. this is exciting indeed! I can’t wait until its 10 years from now and it’s a standard…. 🙂 if only people would just update their browsers. /le sigh.
    [For all that it’s been demonized, Flash was able to upgrade nearly everyone’s viewing capabilities quickly & consistently. That’s how things like H.264 gained critical mass. With Flash being disallowed on iOS, now no one can bump up all viewers. So it goes. –J.]

    1. John… first kudos on your continued progress in the right direction. Adobe does make the best tools, but supporting Flash is a dead end which I’m sure is difficult to accept. I’m not exactly lacking for anything of significance when browsing on an iPad. Things have changed considerably in just the past two years.
      That said, yes, there were benefits of Flash being updated with some form of consistency across platforms. However, Flash has also been “demoninized” precisely for that same reason. Clearly the focus has been on the Windows platform first and given the market share delta, that’s understandable. However, the success of the implementation should come down to the browser. I’m not going to preach about open standards, but in the end, content on the web should be standards based. If someone choose a poor tool to view the web, then their experience should be diminished accordingly.
      So, keep making good tools and we’ll continue to buy them. Keep pushing proprietary technology for web content and you’ll be passed by. It’s you’re market to lose.

  7. We’ll never escape page turns. Awesome.
    [Kai’s Power Tools forever!! 😉 (Yes, people will abuse this technology before finding the really good, restrained ways to use it. A key thing is that it’s extensible, meaning we shouldn’t just keep seeing the same 5 or 8 effects again & again.) –J.]

  8. Excellent news! Now if you could provide fallbacks to normalize html5 audio & video across browsers that are too stubborn to agree on standards we’ll really be getting somewhere…

  9. [quote]O — 3:13 PM on October 11, 2011 Reply
    Gruber just linked to this post so prepare for an onslaught of misinformed commenters.[/quote]
    Do quote tags work? …. I would consider most of Gruber’s readers very informed. Maybe you type sarcasm?

    1. Nah, John had it right. Gruber never met a fact that couldn’t be twisted or mangled to support his personal narrative. I still wonder who kidnapped the thoughtful Gruber of many years ago who reported tech news and called Apple on their B.S.. His drooling fanboy stand-in just isn’t the same.

  10. “Adobe’s using Flash-derived technology to make HTML5 more competitive with Flash”
    Good. I hope CSS3* gets better in the future. This way, Adobe has reason to make Flash even better. Just look at how powerful Flash Player 11 is.
    *I refuse to use HTML5 as an umbrella term and really, it’s less of a breakthrough compared to CSS3.

  11. I CANNOT wait to use this! Oh my god this would be so awesome! Flash is dying but this would absolutely make up for everything.
    I used to think my time studying OGL wouldn’t have any impact on what I ended up doing but then we got WebGL via a canvas, and now, (hopefully) this.

  12. Also, ofc MS is going to be the cow lounging on the railroad track for this because they didn’t invent GLSL. They’re afraid that, if WebGL becomes more popular, they may have to start building OpenGL support in to their proprietary video drivers (this is a big reason why developers don’t try to write games in OGL, even though it would help them port to other platforms).
    They have a multi-billion dollar console business that basically cannibalized PC gaming. Stifling innovation to keep dominance over the last little bit that’s left isn’t going to get them much. It’ll just make their looming, terminal irrelevance all the more acute.

  13. Filters have been in SVG since 1.1. They have nothing to do with Flash. And shaders are borrowed from WebGL, not Flash.

Leave a Reply

Your email address will not be published.