CSS filters are a powerful and easy-to-use visual effects tool for web developers. Filters can manipulate the appearance of any HTML element and can be stacked together to create unique effects with a single line of CSS. They are similar to the effects in Photoshop but with one key difference, the original image remains untouched. So here are some cool CSS filter libraries & tools that will allow you to manipulate any type of images colors, look and feel.

Colofilter

Those colorful filters uses css blend modes and were heavily inspired by Spotify new 2015 ads. This technic is called “DuoTone”, and today, with the power of CSS we can play around with some blend-modes properties, to get some cool visual results.

CSSCO

Photographic filters made with CSS, inspired by VSCO and CSSgram.

CSSgram

Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we’re doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!

Philter

Philter is a jQuery plugin giving you the power to control CSS filters with HTML attributes.

Filters

Really easy to use image filters, patterns and color blending. Intended to help make full image backgrounds on websites better.

cssfilters

Visual playground for generating CSS for custom and Instagram like photo filters. Experiment with your own uploaded photo or select one from the Unsplash collection.

FilterBlend

FilterBlend is a playground for the new CSS background-blend-mode and filter properties. Load your images and combine blending with filters to achieve some really unique effects!

CSS3 Image Filters on Hover

Showcase what can be done with image filters and pseudo class selectors.