Plugin For CSS Filters In jQuery – Philter.js

Html & CSS
Demo    Download
Plugin For CSS Filters In jQuery – Philter
File Size:
Views Total: 559 views
Last Update:February 12, 2021
Publish Date: October 31, 2015
Official Website: Go to website
License: MIT
Plugin Author: Specro

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>

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.