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.

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.


Available filters

- 1977 filter-1977- Adenfilter-aden- Amarofilter-amaro- Ashbyfilter-ashby- Brannanfilter-brannan- Brooklynfilter-brooklyn- Charmesfilter-charmes- Clarendonfilter-clarendon- Cremafilter-crema- Dogpatchfilter-dogpatch- Earlybirdfilter-earlybird- Ginghamfilter-gingham- Ginzafilter-ginza- Hefefilter-hefe- Helenafilter-helena- Hudsonfilter-hudson- Inkwellfilter-inkwell- Kelvinfilter-kelvin- Kunofilter-juno- Larkfilter-lark- Lo-Fifilter-lofi- Ludwigfilter-ludwig- Mavenfilter-maven- Mayfairfilter-mayfair- Moonfilter-moon- Nashvillefilter-nashville- Perpetuafilter-perpetua- Poprocketfilter-poprocket- Reyesfilter-reyes- Risefilter-rise- Sierrafilter-sierra- Skylinefilter-skyline- Slumberfilter-slumber- Stinsonfilter-stinson- Sutrofilter-sutro- Toasterfilter-toaster- Valenciafilter-valencia- Vesperfilter-vesper- Waldenfilter-walden- Willowfilter-willow- X-Pro IIfilter-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. ♥

Getting started

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.

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

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