If you can’t handle pure Internet magic, do not read this article about CSS FilterLab

We’ve just had our first “gee, whiz!” moment at Adobe’s Create the Web event. The company announced Edge, its new suite of tools for web and mobile devs and designers, and one of the coolest tools (that we’ve seen in demos so far) is the open-sourced CSS FilterLab.

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":537977,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"D"}']

Basically, the FilterLab lets you create all kinds of overlays and effects to your web pages on the fly. You bring your page into the FilterLab, select filters from a drop-down menu, pull around some sliders to customize and even animate the effect, then copy/paste the code to apply the CSS effect to your page.

---

Read more Adobe Edge news

---

With the existing filters, you can add drop shadows, animated page flips, paper-crumple effects, and more — as long as your browser supports it.

Don’t see the filter you want? That’s ok; you can grab a Gist from GitHub to import another filter of your choosing.

Here’s a quick look at the filters:

[vb_gallery id=537985]

FilterLab is still in an experimental stage; if you’d like to contribute to the project, submit a pull request on the GitHub page.

Stay tuned. We’ve got more coming up from Create the Web today.

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":537977,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"D"}']

Top image via olly, Shutterstock