# instagram.css: one class, forty filters, and a commit from January 2023

> instagram.css reimplements forty Instagram-style filters as a pure stylesheet applied by putting one class on a figure element, which is a much smaller integration surface than forty filters suggests. What the repository files add is the maintenance picture: a manifest at version 0.1.4, a homepage field over plain http, three of six build dependencies on a floating range, and a browser target set to every browser rather than the documented floor.

**picturepan2/instagram.css** — GitHub describes it as Instagram.css - Complete set of Instagram filters in pure CSS. The repository metadata lists CSS as its primary language. The metadata lists the MIT license. This article stays within the project description and details documented in the GitHub repository README.

- Repository: https://github.com/picturepan2/instagram.css
- Website: https://picturepan2.github.io/instagram.css/
- Stars: 4,007 · Forks: 237
- Language: CSS
- License: MIT
- Published: 2026-08-13 · Updated: 2026-08-18 · Language: en
- Canonical page: https://hysenlabs.com/projects/picturepan2-instagram-css

## The whole API is one class on one element

The integration surface is smaller than the feature list suggests. You include the compiled stylesheet from the dist directory in the head of your page:

```html
<link rel="stylesheet" href="dist/instagram.css">
```

Then you put a class on the element you want filtered. Every filter uses the same markup, a figure element carrying a single filter-named class:

```html
<figure class="filter-[filter-name]">

</figure>
```

There is no wrapper, no data attribute, no configuration object and no JavaScript. The published demo page exists so you can copy the markup rather than read about it, and the README's own framing is that all filters share one structure with different class names. That is a genuinely pleasant property for a stylesheet meant to be dropped into an existing page, and it is also why there is no upgrade concern: adding a filter in a later version cannot break a page that uses an earlier one.

## Three of the forty filters break the naming pattern

There are forty filters listed, each with its display name and its class, and the class is meant to be the name with a prefix. Most entries follow that mechanically, so you can derive one from the other. Three do not, and they are the three you will paste from the page. Kuno is listed under that name but applied as `filter-juno`, not `filter-kuno`. Lo-Fi drops its hyphen and becomes `filter-lofi`. X-Pro II becomes `filter-xpro-ii`, with the space removed and the hyphen kept. None of this is wrong, and each is a case where copying the display name into a class attribute produces a class that does not exist and a photo that comes out unfiltered with no error. The list in the README is the authority, and it is the reason to read it rather than assume.

## The browser target is every browser and the docs state a floor

Two different compatibility stories live in this project. The README says the styles are run through a vendor prefixer to make them work in earlier browsers, and then recommends a specific floor: Chrome 18 or later, Microsoft Edge 13 or later, Firefox 35 or later, Safari 6 or later and Opera 15 or later. Those are precise and, for a project whose last commit is from 2023, remarkably old targets. The manifest says something else. Its browser target list is a single query meaning every browser with any share above zero, which is the widest setting available, so the prefixer adds prefixes for the entire historical range rather than for the recommended minimum. The practical effect is that the compiled file is larger than the documented support floor requires, and that the floor in the README describes what is known to work rather than what has been optimised for.

## Three build dependencies float while a lock file is committed

The build is six gulp packages, and three of them have no version constraint at all: the task runner itself, the prefixer and the Sass compiler are declared at latest. The other three are pinned to a caret range, a CSS minifier, a property-ordering tool and a rename helper. A lock file is committed, so an install that follows it resolves to something specific today, but a fresh resolution without the lock, or a deliberate update, can pull a new major of the task runner and break the build in a way that looks like a broken stylesheet. For a project whose entire output is one file, the build chain is the fragile part rather than the CSS, and it is the part most likely to rot first. The property-ordering configuration in the repository root and the build script at the root are the other two pieces of that chain.

## The homepage field is plain http and the version is still 0.1.4

Two manifest details are worth reading as signals. The homepage is declared as an http address to the project's own GitHub Pages site, while the README links to the same site over https, so a tool that trusts the manifest will produce an insecure link for the one URL a user is most likely to click. And the version is 0.1.4, which is a pre-release number for a project whose description claims a complete set of filters. There are no GitHub releases either, so there is no tag to compare against and no changelog beyond the README. The combination means the published state of this repository is defined by one number in one file, and that number has not been incremented in a long time.

## A one line roadmap and a commit from January 2023

The section describing what comes next contains a single item: add more Instagram filters. There is no roadmap beyond that, no issue tracker policy, and no maintenance statement in either direction. What the repository does record is the date of the most recent commit to the branch, 2023-01-15. So the honest summary is that this is a finished-looking artefact with one outstanding idea behind it. For a pure stylesheet that is less consequential than it would be for a service, since the compiled file keeps working regardless of whether anyone is extending it, but it does change how you should treat the filter list as documentation. Treat it as the state at that date rather than as a current enumeration of what Instagram has, and check the demo page yourself rather than assuming a filter you remember exists is present.

## Customising means editing Sass while the output stays committed

The customisation path is one sentence: modify the Sass source files in the src folder. There is no configuration file, no theme layer and no documented way to adjust a filter's strength without rewriting its source, which is the honest position for something whose selling point is a faithful copy of someone else's look. The compiled and minified output in the dist directory is what the README tells you to include, and it is committed to the repository, so a consumer can take the file without building anything and a contributor has to run the gulp chain to change it. The repository also carries a demo page at its root, which is what the published site is built from, and an assets directory beside the source and output directories. The result is a project with three checked-in artefacts for one idea, where the only thing you can configure is whether to include the file.

## Conclusion

Take this if you want a fixed visual filter on one element and nothing else, because the integration really is a single class and the compiled file is committed, so there is no build to run and no runtime to ship. Copy class names from the list rather than deriving them, since three of the forty do not follow the pattern and a wrong class produces an unfiltered image rather than an error. Treat the filter list as a snapshot from January 2023 rather than a current catalogue. If you want to adjust a filter rather than accept it, you are editing Sass with no configuration layer, so fork the source rather than trying to tune it. And if you depend on it in anything long-lived, pin the file: the package version has not moved past 0.1.4 and there are no releases to fall back on.

## FAQ

### How do I use instagram.css?

Include the compiled stylesheet from the dist directory in the head of your page with a link element, then add a class to the element you want filtered. Every filter uses the same markup, a figure element, with a different filter-named class, so the whole integration is one class on one element. A demo page is published where you can copy the markup directly.

### How many filters does instagram.css provide?

Forty, each listed with its class name. Most follow a mechanical pattern where a display name becomes a filter-prefixed class, but three do not: Kuno is applied as filter-juno, Lo-Fi as filter-lofi, and X-Pro II as filter-xpro-ii. Copy from the list rather than deriving the class from the name.

### Which browsers does instagram.css support?

The README recommends Chrome 18 or later, Microsoft Edge 13 or later, Firefox 35 or later, Safari 6 or later and Opera 15 or later, and says the styles are run through a vendor prefixer to reach earlier browsers. The manifest's browser target list is the widest query available, so the shipped prefixes cover every browser with any usage rather than only the recommended floor.

### How do I add or customise an instagram.css filter?

By editing the Sass source files in the src directory and rebuilding; there is no configuration file and no documented way to adjust a filter without rewriting its source. The compiled and minified output in dist is what the README tells you to include and is committed to the repository. The stated plan for further work is one line, add more Instagram filters.

### Who maintains instagram.css?

A single named author, who asks for pull requests and for donations through a payment service to fund further development. The licence is MIT, the repository records no releases, the manifest version is still 0.1.4, and the most recent commit to the branch is dated 2023-01-15.

## Sources

- [Official documentation](https://picturepan2.github.io/instagram.css/)
- [Official README](https://github.com/picturepan2/instagram.css#readme)
- [Project repository](https://github.com/picturepan2/instagram.css)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/picturepan2-instagram-css