JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist gulpfile.js Jan 16, 2016
src fix position slider values :neckbeard: Jan 16, 2016
.gitignore update lincese Nov 25, 2015 mission acomplished Nov 27, 2015
demo.html fixed names2 Nov 28, 2015
filters.svg add demo and new image from mazarate Nov 23, 2015
gulpfile.js changed gulpfile.js Jan 16, 2016
index.html update Dec 12, 2015
package.json update dependencies Dec 17, 2015


Fildrop is a set of custom SVG filters. Build with Drag & Drop, postCSS, noUiSlider.


##Filters to customize

You can customize someone filters. The filter will be customized if have an icon at top-right of the button.

##How to use

Download FILDROP. The first thing you need to do is include the CSS and the SVG in your project. You can include the filters at the bottom of HTML. I prefer include the file at my images folder.

<link rel="stylesheet" href="path/to/filter.css">

Add class to the element

<img class="saturate" src="path/to/image.png">

You can view all filter effects in this demo


  • saturotate
  • saturate
  • rotamatrix
  • multitable
  • tablen
  • dishue
  • matrix
  • matrix-dos
  • huerotate
  • luminance
  • discrete
  • discrete-dos
  • table
  • table-dos
  • identity
  • linear
  • gamma
  • turbulence
  • sepia
  • fematrix-uno
  • fematrix-dos
  • turbu-map
  • map-uno
  • map-dos
  • blur-uno
  • blur-dos
  • morpho-uno
  • morpho-dos

##Browser support

  • Internet Explorer 10+
  • Chrome 8+
  • Firefox 3+
  • Opera 10+
  • Safari 6+



To contribute to FILDROP, clone this repo locally, create your awesome filters and create pull request with your filter.


Fildrop is licensed under the MIT license


Matthew Bystedt

David Dailey

WebPlatform SVG FILTER