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

Choose a sample image: atx image bike image cacti image lakegeneva image tahoe image
Hovering over any of these images (or clicking on mobile) will remove the filter effect to visualize the changes.

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. This features are supported in the following browsers:

For more information, check on Can I Use.

Usage

There are currently 2 ways to consume this library:

Use CSS classes

When using CSS classes, you can simply add the class with the filter name to the element containing your image.

The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">. Then, add a class to your figure element with the name of the filter you would like to use (shown below)

If you want to work locally, do the following:

  1. Download the CSSgram Library
  2. Link to the CSSgram library within your project:
    <link rel="stylesheet" href="css/vendor/cssgram.min.css">
  3. Add a class to your figure element with the name of the filter you would like to use

For example:


      <!-- HTML -->
      <figure class="aden">
        <img src="../img.png">
      </figure>
Alternatively, you can just download and link to any individual css file:
<link rel="stylesheet" href="css/vendor/aden.min.css">, if you're just using one of the styles.

Available Classes

For use in HTML markup:

Use Sass @extends

If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then @extend the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.

  1. Download the /scss folder contents
  2. Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
  3. Extend the silent placeholder selector @extend %aden; in your element.

For example:


      <!-- HTML -->
      <figure class="viz--beautiful">
        <img src="../img.png">
      </figure>
    

      // Sass
      .viz--beautiful {
        @extend %aden;
      }
Alternatively, you can just download and link any individual .scss file in your Sass manifest:
(i.e. scss/aden.scss), if you're just using one of the styles.

Available Extends

For use in Sass elements: