
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