Plugin For CSS Filters In jQuery – Philter.js

Html & CSS
Plugin For CSS Filters In jQuery – Philter
File Size:
Views Total: 1422 views
Last Update:May 16, 2024
Publish Date: October 31, 2015
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

As we all know that philter is almost an easy way for all the main processes or the post-processes for their major content in the web. By using the Philter tool it is an easy way of writing for an attribute in the slide of HTML. It also supports the hover effects. As this is the nice effect and good effect for the grayscale transition as this one is created by the philter with the one of the simple attribute along it has the drop shadow.

CSS filters supported:

  • hue-rotate
  • saturate
  • sepia
  • grayscale
  • contrast
  • invert
  • opacity
  • brightness
  • drop-shadow
  • svg
  • color
  • blur

How to use :

1. Add the jQuery library and the jQuery Philter plugin :

<script src="jquery-2.1.4.min.js"></script>
<script src="js/philter.min.js"></script>

2. Initialize the plugin script :


3. Add a CSS filter with a value on your element :

<div class="philter blur_5"></div>

4. Also support with applying on multiple CSS filters :

<div class="philter blur_5_hover_0 grayscale_100"></div>

5. Applied with custom SVG filter to the element :

<div class="philter svg_filter"></div>
Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v1.5.0
  • v1.4.1
  • v1.4.0
  • v1.3.1
  • v1.3.0
  • v1.2.0
  • v1.1.2
  • v1.1.1


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like