Philter is a JS plugin giving you the power to control CSS filters with HTML attributes.

Download Learn more

What Philter is all about?

Philter provides an easy way for almost anyone to post-process their content in the web. Using Philter is as easy as writing an attribute in HTML. In fact, that's what you will be doing!

  data-philter-drop-shadow="0 0 5 30">

Higher you can see the Philter attributes that are used on the image on the left. The smaller image on the right retains only the drop-shadow filter. It's that simple, scroll further to see even more goodies!

responsive devices

Turning on hover!

Philter also supports hover effects. Check out the image on the right and then the code a little bit lower.

  data-philter-grayscale="100 0"
  data-philter-drop-shadow="0 0 3 90 0 0 10 60">

This nice effect of grayscale transition was created by Philter with one simple attribute. And some drop shadow, ofcourse.

Since we started talking about transitions, you can control their time in seconds by passing a parameter to Philter upon initiation. Like this:

new Philter({transitionTime: 0.5});
responsive devices

Introducing custom filters!

Have you ever wanted to apply some filters but they didn't work as you expected? Have you ever wondered why there's no particular filter? Well, Philter has you covered. Check out our custom filters! There ain't much of these filters yet but further on we will be introducing more and more of them.

<div data-philter-color="#235668 80"></div>
Vintage 1
Vintage 2
Vintage 3
Vintage 4
Vintage 5
Vintage 6

Download and support Philter!

You can visit Philter on GitHub and download or contribute to the development right now.

Visit Philter on GitHub

Thank you!

All this wouldn't be possible without these people!

Peter Finlan
Anthony Delanoix
Greg Rakozy
Alex Wong
Maelle Keita

Also a shout-out to people at VU. You the best!