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

By Yan Zhu
Last update: Dec 30, 2022
Comments: 10

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

Github

https://github.com/picturepan2/instagram.css

Comments(10)

1

Is this legal?

Thanks for this great library!

I was wondering, is it actually legal to use these filter effect on websites and commercial platforms?

Does Instagram allow this?

Surely the names themselves must have a trademark on them?

And what about the algorithms? I guess these approximate the original Instagram effects, not being pixel perfect copies?
2

Bump lodash from 1.0.2 to 4.17.19
Bumps lodash from 1.0.2 to 4.17.19.
Release notes

Sourced from lodash's releases.
4.17.16

4.0.0

lodash v4.0.0

2015 was big year! Lodash became the most depended on npm package, passed 1 billion downloads, & its v3 release saw massive adoption!

The year was also one of collaboration, as discussions began on merging Lodash & Underscore. Much of Lodash v4 is proofing out the ideas from those discussions. Lodash v4 would not be possible without the collaboration & contributions of the Underscore core team. In the spirit of merging our teams have blended with several members contributing to both libraries.

For 2016 & lodash v4.0.0 we wanted to cut loose, push forward, & take things up a notch!

Modern only

With v4 we’re breaking free from old projects, old environments, & dropping old IE < 9 support!

4 kB Core

Lodash’s kitchen-sink size will continue to grow as new methods & functionality are added. However, we now offer a 4 kB (gzipped) core build that’s compatible with Backbone v1.2.4 for folks who want Lodash without lugging around the kitchen sink.

More ES6

We’ve continued to embrace ES6 with methods like _.isSymbol, added support for cloning & comparing array buffers, maps, sets, & symbols, converting iterators to arrays, & iterable _(…).

In addition, we’ve published an es-build & pulled babel-plugin-lodash into core to make tree-shaking a breeze.

More Modular

Pop quiz! 📣

What category path does the bindAll method belong to? Is it

A) require('lodash/function/bindAll') B) require('lodash/utility/bindAll') C) require('lodash/util/bindAll')

Don’t know? Well, with v4 it doesn’t matter because now module paths are as simple as
```
var bindAll = require('lodash/bindAll');
```
We’ve also reduced module complexity making it easier to create smaller bundles. This has helped Lodash adoption with libraries like Async & Redux!

1st Class FP

With v3 we introduced lodash-fp. We learned a lot & with v4 we decided to pull it into core.

Now you can get immutable, auto-curried, iteratee-first, data-last methods as simply as
Commits
- d7fbc52 Bump to v4.17.19
- 2e1c0f2 Add npm-package
- 1b6c282 Bump to v4.17.18
- a370ac8 Bump to v4.17.17
- 1144918 Rebuild lodash and docs
- 3a3b0fd Bump to v4.17.16
- c84fe82 fix(zipObjectDeep): prototype pollution (#4759)
- e7b28ea Sanitize sourceURL so it cannot affect evaled code (#4518)
- 0cec225 Fix lodash.isEqual for circular references (#4320) (#4515)
- 94c3a81 Document matches* shorthands for over* methods (#4510) (#4514)
- Additional commits viewable in compare view
Maintainer changes

This version was pushed to npm by mathias, a new releaser for lodash since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
3

Bump minimist from 0.0.8 to 1.2.5
Bumps minimist from 0.0.8 to 1.2.5.
Commits
- aeb3e27 1.2.5
- 278677b 1.2.4
- 4cf1354 security notice
- 1043d21 additional test for constructor prototype pollution
- 6457d74 1.2.3
- 38a4d1c even more aggressive checks for protocol pollution
- 13c01a5 more failing proto pollution tests
- f34df07 1.2.2
- 67d3722 cleanup
- 63e7ed0 don't assign onto proto
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
4

Here is a demo CodePen that I made that you could use on your site

Awesome work! I have made a CodePen pen that uses your instagram.css library to imitate the Instagram filter system in the app.

https://codepen.io/mblode/pen/zpLWQW?editors=1100

You are free to use this on your site if you would like. Keep up the great work!
5

Bump qs from 6.5.2 to 6.5.3
Bumps qs from 6.5.2 to 6.5.3.
Changelog

Sourced from qs's changelog.
6.5.3
- [Fix] parse: ignore __proto__ keys (#428)
- [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
- [Fix] correctly parse nested arrays
- [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
- [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
- [Fix] when parseArrays is false, properly handle keys ending in []
- [Fix] fix for an impossible situation: when the formatter is called with a non-string value
- [Fix] utils.merge: avoid a crash with a null target and an array source
- [Refactor] utils: reduce observable [[Get]]s
- [Refactor] use cached Array.isArray
- [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
- [Refactor] parse: only need to reassign the var once
- [Robustness] stringify: avoid relying on a global undefined (#427)
- [readme] remove travis badge; add github actions/codecov badges; update URLs
- [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
- [Docs] Clarify the need for "arrayLimit" option
- [meta] fix README.md (#399)
- [meta] add FUNDING.yml
- [actions] backport actions from main
- [Tests] always use String(x) over x.toString()
- [Tests] remove nonexistent tape option
- [Dev Deps] backport from main
Commits
- 298bfa5 v6.5.3
- ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
- 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
- 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
- 12ac1c4 [meta] fix README.md (#399)
- 0338716 [actions] backport actions from main
- 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
- 51b8a0b add FUNDING.yml
- 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
- f814a7f [Dev Deps] backport from main
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
6

Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes

Sourced from decode-uri-component's releases.
v0.2.2
- Prevent overwriting previously decoded tokens 980e0bf
https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

v0.2.1
- Switch to GitHub workflows 76abc93
- Fix issue where decode throws - fixes #6 746ca5d
- Update license (#1) 486d7e2
- Tidelift tasks a650457
- Meta tweaks 66e1c28
https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1
Commits
- a0eea46 0.2.2
- 980e0bf Prevent overwriting previously decoded tokens
- 3c8a373 0.2.1
- 76abc93 Switch to GitHub workflows
- 746ca5d Fix issue where decode throws - fixes #6
- 486d7e2 Update license (#1)
- a650457 Tidelift tasks
- 66e1c28 Meta tweaks
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
7

Issue Exporting Dom Image

Cool product.

We've been prototyping an web app using these cool filters. Basically the user can upload a photo, apply the effect and download. The app is built using reactJS.

We can apply the filter and use https://github.com/niklasvh/html2canvas to export the image as PNG.

The issues we are running into is exporting the image with the filter. The image exports, no filter is rendered. html2canvas states it does not work on css filters.

Do you have a work around for this?
8

Bump minimist from 0.0.8 to 1.2.6
Bumps minimist from 0.0.8 to 1.2.6.
Commits
- 7efb22a 1.2.6
- ef88b93 security notice for additional prototype pollution issue
- c2b9819 isConstructorOrProto adapted from PR
- bc8ecee test from prototype pollution PR
- aeb3e27 1.2.5
- 278677b 1.2.4
- 4cf1354 security notice
- 1043d21 additional test for constructor prototype pollution
- 6457d74 1.2.3
- 38a4d1c even more aggressive checks for protocol pollution
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
9

Bump set-value from 0.4.3 to 2.0.1
Bumps set-value from 0.4.3 to 2.0.1.
Commits
- bb0f038 2.0.1
- cb12f14 ensure only valid keys are used
- ede8cbe 2.0.0
- 197399e update docs, run verb to generate readme
- 30466a3 use split-string, simplify
- 84adad4 examples
- 4e6970e run update
- 233cf6a 1.0.0
- 20bc8aa run verb to generate-readme
- 77f2e62 run update
- See full diff in compare view
Maintainer changes

This version was pushed to npm by doowb, a new releaser for set-value since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
10

Bump path-parse from 1.0.6 to 1.0.7
Bumps path-parse from 1.0.6 to 1.0.7.
Commits
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.