Explore CSS3 effects with FilterLab

FilterLab is an open source application from Adobe that produces cinematic effects for the web using CSS filters. In this short tutorial I’ll show you the basics of FilterLab, and how to transform and animate elements with just a few lines of CSS.

We’ll look at some of the basic filters and I’ll show you how you can implement them in your projects.


Find 25 inspirational examples of CSS at our sister site, Creative Bloq.

01

01 First open Adobe FilterLab from here (opens in new tab) or here (opens in new tab). Take a look at the built-in filters, which will be familiar if you use Photoshop. If you wish to look at more advanced custom filters, you will need to download Chrome Canary.

02

02 Explore the features and familiarise yourself with the tools to help you decide which filters you require for your project. For this demonstration, I will be focusing on the Blur and Hue-rotate tools. To do the same, copy the webkit filter code – for example, blur: -webkitfilter: blur(7.5px);

03

03 Paste the webkit filter code into your HTML project’s CSS file. This example shows varying blur settings set to my header type classes.

04

04 Once you’ve set up your desired filters, let’s look at animating them. I’m using the CSS3 animation technique found on w3schools. To set up your element for animation, use the animation class, set a name for your animation and a duration. Be sure to do this for each browser type to ensure the widest compatibility. You’ll also need to create beginning and end keyframes in your CSS file for each browser, for Safari and Chrome use. This example will animate from a 20px blur to nothing over five seconds.

05

05 Continue to animate the filter properties for any elements requiring animation in your CSS and experiment until your project looks great. This final example shows the text blurring in and a hue-rotate filter applied to the cloud elements, along with animation applied to the top and left property to give some depth to the page.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.