Instagram filters with CSS3 Effects

Instagram filters recreated using CSS3 filter effects

Ever wanted to recreate Instagram filters on the fly using CSS3 (without needing to open a graphics program)? Now you can!

Using the new filters feature in CSS3, you can recreate all of the Instagram filters. I have, with varying levels of success, recreated every Instagram filter. They’re definitely not perfect, but they show how CSS3 can be used to do things that weren’t possible before. The CSS code is included with each filter, so you can use them as is or play around for more accuracy.

It is amazing that just a few years ago you had to fire up Photoshop or a similar product in order to produce effects like those in Instagram, but thanks to how far the web has come and the tools available to browsers you only need your imagination to create something similar.

← Back to home