Instagram.css

Complete set of Instagram filters in pure CSS

GitHub PayPal Donate

Getting started

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="assets/img/instagram.jpg">
</figure>
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