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!

<div
    data-philter-hue-rotate="30"
    data-philter-contrast="125"
    data-philter-saturate="125"
    data-philter-brightness="125">
</div>

Higher you can see the Philter attributes that are used on the image on the left. It's always a different image from Unsplash Philter collection, so you could see how the same filter looks on different images. Try it! Refresh the page.

Turning on hover!

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

<div data-philter-grayscale="100 0"></div>

This nice effect of grayscale transition was created by Philter with one simple attribute. The first value value is applied as usual and the second on mouse hover or tap if you're on a phone.

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>

Going duotone!

The duotone color effect that Spotify brought back not so long ago incorporates 2 colors that are mapped to shadows and highlights of the image. Duotone gives images vibrancy and stands out in a design. The same effect is used in a CodePen example higher in this page ;)

<div data-philter-duotone="#7028e4 #e5b2ca"></div>