CSSGram


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.

  • #nofilter
  • 1977
  • Aden
  • Brannan
  • Brooklyn
  • Clarendon
  • Earlybird
  • Gingham
  • Hudson
  • Inkwell
  • Kelvin
  • Lark
  • Lo-Fi
  • Maven
  • Mayfair
  • Moon
  • Nashville
  • Perpetua
  • Reyes
  • Rise
  • Slumber
  • Stinson
  • Toaster
  • Valencia
  • Walden
  • Willow
  • X-pro II

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.

There are currently 3 ways to consume this library:

1. 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"> (OR you can now use CDNJS with <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/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:

 <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:
  • 1977: class="_1977"
  • Aden: class="aden"
  • Brannan: class="brannan"
  • Brooklyn: class="brooklyn"
  • Clarendon: class="clarendon"
  • Earlybird: class="earlybird"
  • Gingham: class="gingham"
  • Hudson: class="hudson"
  • Inkwell: class="inkwell"
  • Kelvin: class="kelvin"
  • Lark: class="lark"
  • Lo-Fi: class="lofi"
  • Maven: class="maven"
  • Mayfair: class="mayfair"
  • Moon: class="moon"
  • Nashville: class="nashville"
  • Perpetua: class="perpetua"
  • Reyes: class="reyes"
  • Rise: class="rise"
  • Slumber: class="slumber"
  • Stinson: class="stinson"
  • Toaster: class="toaster"
  • Valencia: class="valencia"
  • Walden: class="walden"
  • Willow: class="willow"
  • X-pro II: class="xpro2"

2. 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:

 <figure class=

"viz--beautiful"

> <img src="../img.png"> </figure>
 

.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:
  • 1977: @extend %_1977;
  • Aden: @extend %aden;
  • Brannan: @extend %brannan;
  • Brooklyn: @extend %brooklyn;
  • Clarendon: @extend %clarendon;
  • Earlybird: @extend %earlybird;
  • Gingham: @extend %gingham;
  • Hudson: @extend %hudson;
  • Inkwell: @extend %inkwell;
  • Kelvin: @extend %kelvin;
  • Lark: @extend %lark;
  • Lo-Fi: @extend %lofi;
  • Maven: @extend %maven;
  • Mayfair: @extend %mayfair;
  • Moon: @extend %moon;
  • Nashville: @extend %nashville;
  • Perpetua: @extend %perpetua;
  • Reyes: @extend %reyes;
  • Rise: @extend %rise;
  • Slumber: @extend %slumber;
  • Stinson: @extend %stinson;
  • Toaster: @extend %toaster;
  • Valencia: @extend %valencia;
  • Walden: @extend %walden;
  • Willow: @extend %willow;
  • X-pro II: @extend %xpro2;

3. Use Sass @mixins

Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).

  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. Include the mixin @include aden() in your element.

For example:

 <figure class=

"viz--beautiful"

> <img src="../img.png"> </figure>
 

.viz--beautiful

{ @include aden() }

As mentioned above, you can also add additional filters as arguments when using the library with mixins:

 

.viz--beautiful

{ @include @include aden(blur(2px) /*...*/); }

Available Mixins

For use in Sass elements:
  • 1977: @include _1977();
  • Aden: @include aden();
  • Brannan: @include brannan();
  • Brooklyn: @include brooklyn();
  • Clarendon: @include clarendon();
  • Earlybird: @include earlybird();
  • Gingham: @include gingham();
  • Hudson: @include hudson();
  • Inkwell: @include inkwell();
  • Kelvin: @include kelvin();
  • Lark: @include lark();
  • Lo-Fi: @include lofi();
  • Maven: @include maven();
  • Mayfair: @include mayfair();
  • Moon: @include moon();
  • Nashville: @include nashville();
  • Perpetua: @include perpetua();
  • Reyes: @include reyes();
  • Rise: @include rise();
  • Slumber: @include slumber();
  • Stinson: @include stinson();
  • Toaster: @include toaster();
  • Valencia: @include valencia();
  • Walden: @include walden();
  • Willow: @include willow();
  • X-pro II: @include xpro2();