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 😉

Thanks for installing the Bottom of every post plugin by Corey Salzano. Contact me if you need custom WordPress plugins or website design.

Facebook Comments

Written by Navdeep Patel

Entrepreneur, Blogger,Thinker
I love the WEB.

Lives in Ahmedabad- India