March 14, 2019

290 words 2 mins read



Instagram.css - Complete set of Instagram filters in pure CSS

repo name picturepan2/instagram.css
repo link
language CSS
size (curr.) 341 kB
stars (curr.) 3699
created 2017-11-20
license MIT License


Instagram.css - Pure CSS Instagram filters. You can add all these Instagram-like filters to your photos with using CSS only. Thanks to the CSSgram for inspiration.

What’s next

  • Add more Instagram filters

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="dist/instagram.css">

Go to Demo page to copy the HTML source code and paste it to anywhere you want. All filters use the same HTML structure with different filter-[filter-name] classes.

<figure class="filter-[filter-name]">
  <img src="assets/img/instagram.jpg">

Available filters

  • 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
  • Kuno 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


You can custom Instagram.css by modifing SASS .scss files located in src folder.

Browser support

Instagram.css uses Autoprefixer to make most styles compatible with earlier browsers. For best compatibility, these browsers are recommended:

  • Chrome (18+)
  • Microsoft Edge (13+)
  • Firefox (35+)
  • Safari (6+)
  • Opera (15+)

Built with ♥ by Yan Zhu. Feel free to submit a pull request. Help is always appreciated.

Instagram.css is completely free to use. If you enjoy it, please consider donating via Paypal for the further development. ♥

comments powered by Disqus