Instagram has made waves in our daily lives. We filter our images with Alden, Slumber and Aden. Now, if we want to add filtered images to our webpages, we don’t need to upload our images through sites like Clonegram. We now have CSSgram.

CSSGram is a library for editing your images with Instagram-like filters directly in CSS.

CSSGram currently supports the following browsers. Sorry Internet Explorer.

  • Google Chrome: 43+
  • Mozilla Firefox: 38+
  • Opera: 32+
  • Safari: 8+

To use CSSGram, you need only to link to the stylesheet and use the classes:

  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 image element with the name of the filter you would like to use.
<figure class="aden">
  <img src="../your-image.png">


Cssgram samples