Transform Images With Philter.js: Free CSS Filter Library

By Jake Rocheleau. in Toolkit. Updated on April 6, 2023.

Instagram is widely known as the most popular photo network. It handles over 52 million photos per day and many of them include filters that alter images on the fly.

This is also possible using CSS filters which apply directly in the browser. These custom filter properties have wide support across many browsers and they look great.

With the Philter JavaScript plugin, you can scale this process to save time and move your code into HTML for dynamic filter effects.

By using this plugin, you gain much greater control over your images. This way you can choose which filters you want to apply to individual images and if certain filters should change based on user behavior such as hovering.

CSS supports animated transitions and Philter makes this process really simple. You just download Philter from the homepage or from the GitHub repo. Once it’s added to your web page, you just add the initialization code and let it go.

Here’s a sample snippet from the GitHub repo:

&lt;script&gt;
  new Philter({
    transitionTime: 0.5, // hover transition time
    url: './js', // philter directory
    tag: true // 'philter' in data attributes
  });
&lt;/script&gt;

By default, you can set up transitions and extra data attributes that you can append in HTML. The url parameter defines the path where Philter should look for custom SVG files used in the filtering process.

These extra filters are packaged with the library, so you don’t need to edit them at all. But, you might move them around or place them into a different directory structure from your current file, so this setting may need to be altered.

Now, you can just add custom filters right to your HTML <img> elements or their containers.

Here’s a simple example:

&lt;div data-philter-blur="5 0"&gt;&lt;/div&gt;

You can find a full list of all filters on GitHub, along with a complete setup guide and many other code samples.

Philter is one of the coolest free plugins around and it pushes the limits of modern CSS. You can even design your own filters if you’re willing to dig into the codebase and tinker around.

For a simple place to get started, just visit the Philter homepage and download a copy. You can have it up & running in no time.