Apply CSS Filter Effects Easily with These CSS Filter Presets

Written by Kevin Liew on 07 Jul 2016
50,254 Views • Web Development

CSS filter effects are a way to processing an element's rendering before it is displayed in the document. This filter originally designed for use in SVG, but now, you can use it in CSS too. You can apply blurring, changing color intensity before it's displayed.

If you want to know more on how to create your very own filter effect, check out CSSTrick Filter article. It will walk through each filter and its usage.

However, if you want to use a set of predefined CSS filters, here we have 5 CSS libraries with many presets. Usually you just need to apply a specific class name to your image and it will work like magic - transform your image with the filter effect.

CSSgram

A tiny library for creating Instagram filters with CSS filters and blend modes.

CSSCO

Inspired by VSCO and CSS Gram, if you're a fan VSCO, these filter effects should look pretty similar to those.

ColoFilter.css

Inspired by Spotify 2015 Ads, this libary apply DuoTone effect to your images. Unfortunately, it won't work with IE.

Filters.css

Another filter library with addtional effect such as glossy, grid, stripes.

Philter

Philter is not a filter library, but a Javascript Plugin that provides an easy way for everyone to post-process their content in the web by using a set of data attributes. You can create an effect easily with this plugin.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.