CSSGram is an Instagram filter library in Sass and CSS.
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 replaced element like <img>). The recommendation is to wrap your images in a <figure> tag. More about the tag here.
This library uses CSS Filters and CSS Blend Modes. These features are supported in the following browsers:
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 43+ ✔ | 38+ ✔ | Nope ✘ | 13 ✔ | 32+ ✔ | 8+ ✔ |
For more information, check on Can I Use.
There are currently 2 ways to consume this library:
When using CSS classes, you can simply add the class with the filter name to the element containing your image.
- Include the CDN link in your
<head>tag:<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">
- Alternatively, you can download the CSSgram library locally and link to the it within your project:
<link rel="stylesheet" href="css/vendor/cssgram.min.css"> - Add a class to your image 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 (e.g. <link rel="stylesheet" href="css/vendor/aden.min.css">), if you’re just using one of the styles.
For use in HTML markup:
- Aden:
class="aden" - Brannan:
class="brannan" - Reyes:
class="reyes" - Perpetua:
class="perpetua" - Inkwell:
class="inkwell" - Toaster:
class="toaster" - Walden:
class="walden" - Hudson:
class="hudson" - Gingham:
class="gingham" - Mayfair:
class="mayfair" - Lo-fi:
class="lofi" - X-Pro II:
class="xpro2" - 1977:
class="_1977" - Brooklyn:
class="brooklyn" - Nashville:
class="nashville" - Lark:
class="lark" - Moon:
class="moon" - Clarendon:
class="clarendon" - Willow:
class="willow"
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 😊.
- Include a link to
scss/cssgram.scssvia an@importstatement in your Sass manifest file (i.e.main.scss). It may look like:@import 'vendor/cssgram' - Extend the placeholder selector (e.g.
@extend %adenor using mixins@include aden()) in your element.
For example:
<!-- HTML -->
<figure class="viz--beautiful">
<img src="../img.png">
</figure>// Sass
.viz--beautiful {
@extend %aden;
}or using mixins (more flexible)
// Sass (without adding new CSS3 filters)
.viz--beautiful {
@include aden();
}
// Sass (adding new CSS3 filters)
.viz--beautiful {
@include aden(blur(2px) /*...*/);
}
Alternatively, if you're just using one of the styles, you can download and link any individual .scss file in your Sass manifest (i.e. scss/aden.scss).
For use in Sass stylesheets:
Extends
- Aden:
@extend %aden - Brannan:
@extend %brannan - Reyes:
@extend %reyes - Perpetua:
@extend %perpetua - Inkwell:
@extend %inkwell - Toaster:
@extend %toaster - Walden:
@extend %walden - Hudson:
@extend %hudson - Gingham:
@extend %gingham - Mayfair:
@extend %mayfair - Lo-fi:
@extend %lofi - X-Pro II:
@extend %xpro2 - 1977:
@extend %_1977 - Brooklyn:
@extend %brooklyn - Nashville:
@extend %nashville - Lark:
@extend %lark - Moon:
@extend %moon - Clarendon:
@extend %clarendon - Willow:
@extend %willow
Mixins (You can add more CSS3 filters as arguments)
- Aden:
@include aden() - Brannan:
@include brannan() - Reyes:
@include reyes() - Perpetua:
@include perpetua() - Inkwell:
@include inkwell() - Toaster:
@include toaster() - Walden:
@include walden() - Hudson:
@include hudson() - Gingham:
@include gingham() - Mayfair:
@include mayfair() - Lo-fi:
@include lofi() - X-Pro II:
@include xpro2() - 1977:
@include _1977() - Brooklyn:
@include brooklyn() - Nashville:
@include nashville() - Lark:
@include lark() - Moon:
@include moon() - Clarendon:
@include clarendon() - Willow:
@include willow()
Either:
- Create an issue
Or:
- Fork this repository
- Clone the fork onto your system
npm installdependencies (must have Node installed)- Run
gulpto compile CSS and the test site - Make changes and check the test site with your changes (see file structure outline below)
- Submit a PR referencing the issue with a smile 😄
If you’d like to contribute, the following filters are yet to be added:
- Amaro
- Ashby
- Brannan
- Charmes
- Crema
- Dogpatch
- Ginza
- Hefe
- Helena
- Juno
- Kelvin
- Ludwig
- Maven
- Rise
- Sierra
- Skyline
- Slumber
- Stinsen
- Sutro
- Valencia
- Vesper
Filters are really fun to create! Reference photos created by Miles Croxford can be found here.
source/css/cssgram.csscontains each of the CSS classes you can apply to your<img>to give it the filter. You should usesource/css/cssgram.min.cssfor production if you want access to all of the librarysource/scss/contains the source files for individual classes and placeholder selectors you can use to extend CSS classes in Sasssite/is the public facing websitesite/testis how you test filters if you're developing, remember to changeis_donefor the filter you're creating insite/filters.json.
Note: this will also have mixin options and a PostCSS Component.