Introducing CSS FilterLab

In October 2011, Adobe proposed CSS Shaders as a way to bring cinematic effects to the web. Effects like saturation, gamma, burn, fold, curl, and even dissolve and explode could be applied with CSS to regular HTML elements. That proposal has evolved. It has been openly debated, updated, and merged with the CSS Filter Effects specification. It is now on its way to a browser near you. CSS Shaders now go by the name of CSS Custom Filters but they're just as expressive.

CSS FilterLab is a browser-based tool that lets you play with CSS filters, tweak them, and see the effects in real time (see Figure 1). You can use the tool to combine multiple filters and animate them to create rich cinematic effects.

At the time of writing, this is really cutting-edge technology, so only a few browsers support it. So, when you open up CSS FilterLab in your browser, you'll be prompted with instructions on what to do to get the best experience. We took great care to make those instructions simple and easy to follow.

It's easy to start experimenting with CSS FilterLab. Once you open it up in a browser, you can start adding filters from the Add Filter menu.

You can choose to apply built-in filters or custom filters:

• Built-in filters are the ones that come by default with the browser. They bring basic color effects such as grayscale, sepia, saturation or contrast.
• Custom filters take effects to a whole new level. Some examples that have been built include effects like burn, curl, fold, dissolve, explode, and many more. Custom filters don't come with the browsers; they're written by developers themselves. They make use of shaders, which are small programs that enable fine-grained control over color and geometry. Shaders take advantage of hardware acceleration and are commonly used in visual effects for gaming. They might look alien to CSS developers, and they generally require a strong grasp of math.

Fortunately, CSS FilterLab comes bundled with a few great examples of custom filters with underlying shaders. One such example is Fold, which gives an HTML element the 3D aspect of a folded piece of paper (see Figure 2).

The filters that have been applied expose their parameter controls. This makes it very easy for you to fine-tune them to get the effect you're looking for. In addition, multiple built-in and/or custom filters can be applied together to get stunning results.

Once you're happy with the result, save your changes as a preset. This allows you to reuse the configuration later.

Effects don't just happen. They come into being, transitioning from one state to another. This is what makes them expressive.

CSS FilterLab comes with a basic set of animation controls that help you create smooth transitions between filter parameter values.

Notice the timeline and controls at the bottom of the screen. Click at any point of the timeline, and then change the parameters of the active filters. This creates a new keyframe on the timeline. Hit the play button to see the animation run through (see Figure 3).

Keyframes can be added, dragged around the length of the timeline or removed so you can tweak the animation to get it just right.

The duration of the animation can be changed from the input to the right of the timeline. It's measured in seconds.

Quick walkthrough of creating a fold animation with CSS FilterLab. (0:19)

CSS FilterLab enables you to create rich visual effects. It's important to know that this is done with plain CSS, albeit cutting-edge CSS.

At Adobe, we've worked hard, together with our partners, to bring this technology to the open web. We're not about to hide it behind a tool.

CSS FilterLab shows the exact code that's being used to achieve an effect or animation. The CSS Syntax and CSS Animation Syntax panels, just above the timeline, show just what you'd expect. You can copy this code into your own projects to make use of the effects. Keep in mind that CSS Filters are just starting to become available in browsers.

This is where things can become challenging. However, if you find complex math and writing shaders particularly appealing, you'll be glad to know that CSS FilterLab includes a fully-fledged shader editor (see Figure 4).

To create a new custom filter, start by forking an existing custom filter from the ones provided under the Add Filter menu. You'll notice that your forked filter appears in the Forked tab of the menu. Click the "customize" icon and you'll get to the core of a custom filter.

From this point on, you have full control over the parameters used, their types, as well as the fragment and vertex shader source. Your changes are automatically saved and stored locally, in the browser.

Shaders are written in OpenGL Shading Language (GLSL). The topic of writing shaders is beyond the scope of this introduction, but you can learn more from the GLSL documentation. Be sure to read about the types, methods, and features of the language to get the best out of your shaders.

The error panel highlights any issues with your shader code, in real time. This is really useful because it keeps you in the same context while developing and previewing. You also get to see the results of your shader code in real time.

Share your custom filters by publishing them from CSS FilterLab as a gists on GitHub. The controls for doing this are found in the shader editor panel.

Once published, share the link with others. They'll be able to import your custom filter in CSS FilterLab and use it on their own content. To import a custom filter go to the Add Filter menu, choose Import and use the gist URL.

All of the code for CSS FilterLab is freely available on GitHub under the Apache License v2. We're looking forward to your thoughts, feedback, and contributions to the project.

If you write shaders that you'd like to distribute with CSS FilterLab, please contribute them to the project. Before checking in any code, take a moment to make yourself familiar with the contribution guidelines outlined on GitHub.

CSS Filters and Custom Filters open up a wealth of creative effects for web content. CSS FilterLab gives only a hint about what's becoming possible. But the true value is in your hands and in what you create with this technology.

Give some thought to the new opportunities for interaction and expressiveness that filters, geometry manipulation and cinematic effects can bring to your work. Think about what this means for your content on a large screen, on a mobile device, and in so many new contexts.

Use CSS FilterLab to learn about the capabilities of the modern graphical web and share your thoughts with us. We'd love to know what you create with them.

Adobe's Alan Greenblatt has created a short video walkthrough of CSS FilterLab. If you're keen to learn more, that is a great place to start.

You can also find out more about Adobe's contributions to make the web even better by visiting html.adobe.com.