Instagram.css

Complete set of Instagram filters in pure CSS

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

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