Web Platform Team Blog

Making the web awesome

CSS FilterLab: A Visual Playground for Custom Filters

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

Most of us have used filters in applications like Photoshop to transform images in any number of amazing ways. And unless you’re doing strictly print work, there’s a good chance most of those images found their way online. Filters are such an integral part of the process of bringing visual content to the web that we decided they should actually be standard web technology in the form of CSS Custom Filters.

CSS Custom Filters allow you to apply filters to not just images, but any HTML element in real time, right in the browser. Built-in filters allow you to achieve standard visual effects like blur, grayscale, drop shadows, and sepia while custom CSS Filters allow you to do just about anything you can imagine.

To help designers and developers get a feel for what CSS Filters are, we built an application called CSS FilterLab. And to help introduce CSS FilterLab to the world, we created this short video:

To start experimenting with custom filters, learn how to enable CSS Custom Filters in Chrome.

Now all that’s left to do is head over to CSS FilterLab and have some fun.

One Comment

  1. April 17, 2013 at 10:41 am, Arnold Dela Cruz said:

    Really excited about this technology offering!