CSSgram: Instagram Filters Recreated with CSS Filters and Blend Modes

Austin, Texas-based front end developer Una Kravets has created CSSgram, a tiny library that recreates the look of Instagram filters using CSS filters and blend modes.

“Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS,” Kravets writes. “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!” Kravets has recreated 17 Instagram filters:

The website has a field for inputting a link to your own photo to instantly see what it looks like with each filter. We tried it out with this shot:

Here are a few of the results that appeared:

You can also include or download the library (it weighs less than 1 kilobyte) for you own project to quickly add filters to your web images by adding a class to the figure element. Head on over to CSSgram to try it out for yourself.

P.S. If you’re interested in the technical details of how Kravets creates CSS image effects, you can read some of her documentation on her blog and watch this talk she gave at CSS Conf EU.