What is This?

For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters.

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!

We are using pseudo-elements (i.e. :before and :after ) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <img> . The recommendation is to wrap your images in a <figure> tag. More about the tag here.

Browser Support

This library uses CSS Filters and CSS Blend Modes. These features are supported in the following browsers:

Google Chrome: 43+

Mozilla Firefox: 38+

Internet Explorer: Nope

Opera: 32+

Safari: 8+

For more information, check on Can I Use.