We're all used to using Photoshop (opens in new tab) filters to apply visual effects like blur, grayscale, drop shadows, and sepia to our images. Now Adobe (opens in new tab) has launched CSS Custom Filters (opens in new tab), which enable you to apply filters to not just images, but any HTML or SVG element in real time, right in the browser.
- Read all our CSS-related posts here
Custom CSS Filters go beyond the effects offered by standard Photoshop filters to create effects such as flipping pages, curling corners, paper textures, curtain effects, a magnifying glass, "or anything else you can express in a shading language".
To explain what CSS Filters are and how you can use them, Adobe has built an application called CSS FilterLab (opens in new tab). It has also released this explanatory video:
Liked this? Read these!
- How to build an app (opens in new tab)
- Illustrator tutorials (opens in new tab): amazing ideas to try today!
- Our favourite web fonts - and they don't cost a penny
Have you had a play with CSS Custom Filters yet? Share your views in the comments below!