Instagram Filters programmatically,Explained in Fewer than 140 Characters

Download the compiled and minified Instagram.css files. Include instagram.css located in /dist in your website or Web app <head> part.

<link rel="stylesheet" href="instagram.min.css">

All filters use the same HTML structure with different filter-[filter-name] classes.

<figure class="filter-[filter-name]">
  <img src="images/galg.jpg">
</figure>

For example if you want to add 1977 filter on your image than your code should goes like this

<figure class="filter-1977">
  <img src="images/galg.jpg">
</figure>

More filter effects and their names as below:

Normal
1977
filter-1977
Aden
filter-aden
Amaro
filter-amaro
Ashby
filter-ashby
Brannan
filter-brannan
Brooklyn
filter-brooklyn
Charmes
filter-charmes
Clarendon
filter-clarendon
Crema
filter-crema
Dogpatch
filter-dogpatch
Earlybird
filter-earlybird
Gingham
filter-gingham
Ginza
filter-ginza
Hefe
filter-hefe
Helena
filter-helena
Hudson
filter-hudson
Inkwell
filter-inkwell
Kelvin
filter-kelvin
Juno
filter-juno
Lark
filter-lark
Lo-Fi
filter-lofi
Ludwig
filter-ludwig
Maven
filter-maven
Mayfair
filter-mayfair
Moon
filter-moon
Nashville
filter-nashville
Perpetua
filter-perpetua
Poprocket
filter-poprocket
Reyes
filter-reyes
Rise
filter-rise
Sierra
filter-sierra
Skyline
filter-skyline
Slumber
filter-slumber
Stinson
filter-stinson
Sutro
filter-sutro
Toaster
filter-toaster
Valencia
filter-valencia
Vesper
filter-vesper
Walden
filter-walden
Willow
filter-willow
X-Pro II
filter-xpro-ii

Share your thoughts in comments, we accept voice comments as well for lazy coders 😉

Facebook Comments

Written by Navdeep

Entrepreneur, Blogger,
Thinker | Programmer
love the WEB.
~~Proud Earthling~~