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