Control CSS filters with HTML attributes

philter-collection

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.

hover
before
after

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>

Copyright © 2017 Philter