Complete set of Instagram filters in pure CSS

Yan Zhu 19a73ee928 Update example photo name.		7 年之前
assets	19a73ee928 Update example photo name.	7 年之前
dist	3484020dc4 Improve Poprocket filter	7 年之前
src	3484020dc4 Improve Poprocket filter	7 年之前
.csscomb.json	f226c2b34e Initial Instagram filter 1977	7 年之前
.gitattributes	f226c2b34e Initial Instagram filter 1977	7 年之前
.gitignore	f226c2b34e Initial Instagram filter 1977	7 年之前
LICENSE	5b2cef865a Initial commit	7 年之前
README.md	19a73ee928 Update example photo name.	7 年之前
gulpfile.js	876d4073ad Update gulp watch script	7 年之前
index.html	19a73ee928 Update example photo name.	7 年之前
package.json	3484020dc4 Improve Poprocket filter	7 年之前

Instagram.css

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">
</figure>

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

Custom

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. ♥

README.md