A tiny library for recreating Instagram filters from a hell-dimension (with apologies to CSS-Gram).
- Download the most recent version of the library and add it to your page.
- Attach desired filter class to the image as a class. View the demo site to see available filters.
- (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.
A fun little exercise in teaching myself CSS filters that turned into something more. Images from Unsplash.
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.