design freebies, tools and inspiration
Freebies

CSS Gram, Instagram Photo Effects With CSS

CSS Gram Instagram Effects With CSS Library

CSS Gram is a tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.

The CSS code adds filters to the images as well as applies 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.

In terms of browser support CSS Gram works with all major new browsers (Chrome 43+, Firefox 38+, Opera 32+, Safari 8+). Support for Internet Explorer is not present at this time.

CSS Gram requires the inclusion of a CSS file in your HTML code, which you can do on your own server or use the Cloudflare CDN hosted file.

CSS Gram Library Effects Preview

CSS Gram Library Effects Preview

Download

Spread the word