// the find
una/CSSgram
CSS library for Instagram filters
CSSgram applies Instagram-style photo filters using only CSS — specifically `filter` properties and blend modes via `::before`/`::after` pseudo-elements on a wrapper element. It covers about 25 named filters (Aden, Clarendon, Lo-fi, etc.) and ships both plain CSS classes and Sass mixins/extends. Useful for anyone who wants client-side photo styling without a canvas or image processing pipeline.
The pseudo-element approach is clever: you get gradient overlays and blend modes without touching the `<img>` element or adding extra markup beyond a wrapping `<figure>`. The Sass mixin variant lets you pass in additional `filter` values, so you can stack effects without forking the source. Shipping individual per-filter CSS files means you can include only what you need — no tree-shaking required. Browser support at the time was reasonable: Chrome 43+, Firefox 38+, Safari 8+.
The repo has been dead since 2021 — no commits, no maintenance, and Instagram has added many filters since then that aren't here. The `::before`/`::after` wrapper requirement is a real friction point: it breaks on `<img>` directly and requires restructuring markup you may not control. The CSS `filter` approximations don't match the actual Instagram results closely — some filters look noticeably off, which matters if accuracy is the point. There's also no PostCSS plugin despite the README promising one, and the build tooling is Gulp 3 with Bower, both long past end-of-life.