Skip to content
A tiny library for recreating Instagram filters from a hell-dimension
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src
.gitattributes
.gitignore
README.md
evil-css-gram.css

README.md

Evil CSS-Gram

A tiny library for recreating Instagram filters from a hell-dimension (with apologies to CSS-Gram).

View The Demo or Download

Usage Instructions

  1. Download the most recent version of the library and add it to your page.
  2. Attach desired filter class to the image as a class. View the demo site to see available filters.
  3. (Optional) Bathe computer in holy water.

The CSS Filter property applies to all children - so you can also attach the filter class to a containing div or figure element. For extra fun, try putting an evil filter on the body element.

note: A few filters use CSS transforms as well - those might not work as well on containing elements.

About

A fun little exercise in teaching myself CSS filters that turned into something more. Images from Unsplash.

TODO

As always, there are a million related things to try.

  • Experiment with background-blend-mode filters.
  • SVG Filters!
  • Random preview image from Unsplash.
  • Click image to copy the filter to your clipboard.
  • For fun, add the ability to apply one of the filters to the entire page on the body/html element (it's pretty wild).
  • Better tooling for generating complex filters. Even some of the better tools don't allow you to stack or re-arrange the order. A better tool could be very useful for the three people on the planet busy building CSS filter libraries.
You can’t perform that action at this time.