A while ago, Adobe proposed CSS Shaders as a way to bring cinematic effects to the web. Effects like saturation, gamma, burn, fold, curl, 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 Filters and Custom Filters open up a new world of creative effects for web designers and developers. We're really excited about what lies ahead and we want to share this joy with you. To do so, we created CSS FilterLab to help you experiment with this amazing technology.
CSS FilterLab is a small browser-based tool that lets you play with CSS filters, tweak them and see the effects in real time. You can use the tool to combine multiple filters and animate them to create rich cinematic effects.
[Screenshot with the CSS FilterLab tool]
At the time of writing, this is really cutting-edge technology so only a few browsers support it. Open up CSS FilterLab in your browser and 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 found in the upper left corner.
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: burn, curl, fold, dissolve, explode and many more. They make use of shaders - small programs that enable fine-grained control over color and geometry. Shaders are commonly used in visual effects for gaming and generally require a strong grasp math.
Custom filters don't come with the browsers, they're written by developers themselves. Fortunately, CSS FilterLab comes bundled with a few great examples of custom filters with underlying shaders.
[Screenshot with fold effect in 3D]
Active filters expose their parameter controls. This makes it very easy for you to fine-tune them to get the effect you're looking for. Multiple 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.
[Screenshot with active filter controls]
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 small set of animation controls that help you create smooth transitions between filter parameter values.
Notice the timeline and controls at the lower end of the screen. Click at any point of the timeline, then make some changes to the parameters of the active filters. This creates a new keyframe on the timeline. Hit the play button to see the animation run through.
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.
[ YouTube video with animated folding shader ]
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 it gets challenging. If you find math and writing shaders particularly appealing, you'll be glad to know that CSS FilterLab includes a fully-fledged shader editor.
Start by forking a 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.
[ Screenshot with shader editor panel open ]
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. 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 get to see the results of your shader code in real time.
Share your custom filter by publishing it from CSS FilterLab as a gist on GitHub. The controls for 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 openly available on GitHub. 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 oportunities 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 the CSS FilterLab. If you're keen to learn more, that is a great place to start.
You can find out more about contributions we're doing to make the web even better by visiting html.adobe.com.
Explore!