Web Platform Team Blog

Making the web awesome

CSS Shaders now in CSS Filter Effects Specification

Note: Custom Filters is no longer supported in Chrome or WebKit Nightlies.

After detailed discussion with members of the CSSWG, a decision has been made to incorporate the CSS Shaders specification into the CSS Filter Effects specification. As a result, the feature known as Shaders will now be referred to as Custom Filters.

For more information, check out the CSS Custom Filters page.  Samples are also available on GitHub.


  1. August 31, 2012 at 2:20 pm, andy said:

    this sucks. what possible practical application could this have? it seems like the complete wrong platform to be part of the actual specification for the language.

    • August 31, 2012 at 3:11 pm, nimbupani said:

      A lot of the web suffers from the lack of smooth UX that native applications provide. We are attempting to provide features that would help reduce the gap. The demos are linked to, from the post on how this could possibly be useful in providing subtle effects for a better user experience. Here they are again:

      • August 31, 2012 at 6:03 pm, andy said:

        native applications are native for a reason. the dom is an incredibly inefficient rendering engine and always will be, by design. adding shaders to the dom seems ludicrous. Why not implement directx in the dom? why not let my javascript free and allocate memory? it’s just the wrong medium.

        flash was a good platform for effects because it was essentially a native app. native apps are good platform for effects because your rendering pipeline can actually be a rendering pipeline. building shaders into a markup language invites so many potential horror stories.

        if this was geared more towards something like canvas, that would be a little less insane. with shaders and such you get heavily into graphics territory, which takes you into graphics hardware, which takes you into, oh my goodness, native apps!!

        say it with me now, the dom is not a game engine. the dom is not a game engine. the dom is not a game engine. you’re going to slow down and then crash my browser with this stuff.

        • August 31, 2012 at 7:04 pm, nimbupani said:

          I do not understand your point. Shaders do not impact the DOM, they only affect the element at render. DOM has nothing to do with CSS Shaders. Rendering something pixel by pixel on a canvas is as terrible as rendering text pixel by pixel on the viewport.

          Performance on browsers are of utmost importance to any browser vendor, and none of this will happen without paying due attention to that.

          There are multitudes of efforts in progress that are equally “insane” w.r.t audio APIs, device APIs and drag and drop events that would have much deeper impact on the browser than visual effects would.

        • September 01, 2012 at 12:56 am, aki said:

          Web is becoming more powerful and devices are getting faster. Yes, some websites in the future will not run on old spec machines or archaic browsers buy your (future) phone will probably be able to deal with it.

  2. September 03, 2012 at 9:02 am, Brian said:

    I think it’s great. Bring on the shaders. CSS3 all the way !

  3. September 05, 2012 at 1:15 pm, Pete said:

    Really looking forward to using these. Makes it so frustrating that Microsoft is behaving so opaque and obstinate with this. GLSL or no GLSL, I really don’t want to have to recode my shaders multiple times. I know Adobe is fighting the good fight on this, so… cheers! 🙂 Here’s hoping reason prevails.

  4. September 05, 2012 at 7:00 pm, Andrew Wooldridge said:

    CSS3 Filter Effects is great – folks forget that the web is constantly evolving and growing and that there are always new devices that may take advantage of these new features in unexpected ways.