npm install instagram.cssInstagram.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.
- Add more Instagram filters
Download the compiled and minified Instagram.css files. Include instagram.css located in /dist in your website or Web app <head> part.
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.
```

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