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
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.
Figure 1. Creating and applying filters in CSS FilterLab.
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.
Getting started
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).
Figure 2. The Fold custom filter applied to the HTML element in CSS FilterLab.
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.
Animating effects
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)
Code syntax
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.
Creating new custom filters
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.
Figure 3. The error panel highlights issues.
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.
Sharing and importing custom filters
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.
Open source
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.
Where to go from here
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.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Comments are currently closed as we migrate to a new commenting system. In the interim, please provide any feedback using our feedback form. Thank you for your patience.
