Web Platform Team Blog

Making the web awesome

Explore LA through the prism of custom filters

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



The Adobe Web Platform team recently partnered with two talented contractors (Edan Kwan and David Vale) to build a mobile application that showcases one of the features the team has been implementing in WebKit and Blink. The application is modeled after a travel app – with the addition of some really cool CSS Custom Filters (aka CSS Shaders) to enhance the UI. The application provides a glimpse into the new capabilities that will be available to designers and developers interested in creating compelling UI experiences using web standards. CSS Custom Filters are defined in the CSS Filter Effects Specification.

The application was written entirely in HTML, CSS and JavaScript and packaged for Android using Adobe’s PhoneGap and a custom build of Google’s Blink rendering engine. The application also runs on desktop computers; CSS Custom Filters are currently available in Chrome behind the CSS Shaders flag, so anyone can start experimenting with them now.  See how custom filters have been used to create an enhanced user experience in this travel app.

The code for this travel application has been open sourced under the MIT license and is available right now on GitHub. We love feedback, so feel free to clone it, fork it, and experiment with it. Members of the Web Platform team are at MAX and will be at the Web Platform booth with Android devices that have the demo running. Be sure to stop by and check out just how easy it will be to add engaging effects to an application using CSS Custom Filters.

Comments are closed.