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.
Each filter example includes the original Instagram filter to the left, and the image with CSS3 effect on the right. You can see that if you remove the CSS from the right, you end up with the original, unfiltered image.
Unfiltered Image
Here is the unfiltered image for your reference:
X-PRO 2
![X Pro 2 Instagram filter example](/assets/wp-content/uploads/2014/07/1374-xpro2-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-xpro2 { -webkit-filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg); filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg); }
Willow
![Willow Instagram filter example](/assets/wp-content/uploads/2014/07/1374-willow-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-willow { -webkit-filter: saturate(0.02) contrast(0.85) brightness(1.2) sepia(0.02); filter: saturate(0.02) contrast(0.85) brightness(1.2) sepia(0.02); }
Walden
![Walden Instagram filter example](/assets/wp-content/uploads/2014/07/1374-walden-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-walden { -webkit-filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5); filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5); }
Valencia
![Valencia Instagram filter example](/assets/wp-content/uploads/2014/07/1374-valencia-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-valencia { -webkit-filter: sepia(0.15) saturate(1.5) contrast(0.9); filter: sepia(0.15) saturate(1.5) contrast(0.9); }
Toaster
![Toaster Instagram filter example](/assets/wp-content/uploads/2014/07/1374-toaster-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-toaster { -webkit-filter:sepia(0.4) saturate(2.5) hue-rotate(-30deg) contrast(0.67); -filter:sepia(0.4) saturate(2.5) hue-rotate(-30deg) contrast(0.67); }
Sutro
![Sutro Instagram filter example](/assets/wp-content/uploads/2014/07/1374-sutro-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-sutro { -webkit-filter: brightness(0.75) contrast(1.3) sepia(0.5) hue-rotate(-25deg); filter: brightness(0.75) contrast(1.3) sepia(0.5) hue-rotate(-25deg); }
Sierra
![Sierra Instagram filter example](/assets/wp-content/uploads/2014/07/1374-sierra-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-sierra { -webkit-filter: contrast(0.8) saturate(1.2) sepia(0.15); filter: contrast(0.8) saturate(1.2) sepia(0.15); }
Rise
![Rise Instagram filter example](/assets/wp-content/uploads/2014/07/1374-rise-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-rise { -webkit-filter: saturate(1.4) sepia(0.25) hue-rotate(-15deg) contrast(0.8) brightness(1.1); filter: saturate(1.4) sepia(0.25) hue-rotate(-15deg) contrast(0.8) brightness(1.1); }
Nashville
![Nashville Instagram filter example](/assets/wp-content/uploads/2014/07/1374-nashville-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-nashville { -webkit-filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg); filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg); }
Mayfair
![Mayfair Instagram filter example](/assets/wp-content/uploads/2014/07/1374-mayfair-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-mayfair { -webkit-filter: saturate(1.4) contrast(1.1); filter: saturate(1.4) contrast(1.1); }
Lo-Fi
![Lofi Instagram filter example](/assets/wp-content/uploads/2014/07/1374-lofi-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-lofi { filter: contrast(1.4) brightness(0.9) sepia(0.05); -webkit-filter: contrast(1.4) brightness(0.9) sepia(0.05); }
Kelvin
![Kelvin Instagram filter example](/assets/wp-content/uploads/2014/07/1374-kelvin-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-kelvin { filter: sepia(0.4) saturate(2.4) brightness(1.3) contrast(1); -webkit-filter: sepia(0.4) saturate(2.4) brightness(1.3) contrast(1); }
Inkwell
![Inkwell Instagram filter example](/assets/wp-content/uploads/2014/07/1374-inkwell-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-inkwell { -webkit-filter: grayscale(1) brightness(1.2) contrast(1.05); filter: grayscale(1) brightness(1.2) contrast(1.05); }
Hudson
![Hudson Instagram filter example](/assets/wp-content/uploads/2014/07/1374-hudson-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-hudson { -webkit-filter: contrast(1.2) brightness(0.9) hue-rotate(-10deg); filter: contrast(1.2) brightness(0.9) hue-rotate(-10deg); }
Hefe
![Hefe Instagram filter example](/assets/wp-content/uploads/2014/07/1374-hefe-300x300.jpg)
Original (Instagram) Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.hefe { -webkit-filter: contrast(1.3) sepia(0.3) saturate(1.3) hue-rotate(-10deg) brightness(0.95); filter: contrast(1.3) sepia(0.3) saturate(1.3) hue-rotate(-10deg) brightness(0.95); }
Earlybird
![Earlybird Instagram filter example](/assets/wp-content/uploads/2014/07/1374-earlybird-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-earlybird { -webkit-filter: sepia(0.4) saturate(1.6) contrast(1.1) brightness(0.9) hue-rotate(-10deg); filter: sepia(0.4) saturate(1.6) contrast(1.1) brightness(0.9) hue-rotate(-10deg); }
Brannan
![Brannan Instagram filter example](/assets/wp-content/uploads/2014/07/1374-brannan-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-brannan { -webkit-filter: sepia(0.5) contrast(1.4); filter: sepia(0.5) contrast(1.4); }
Amaro
![Amaro Instagram filter example](/assets/wp-content/uploads/2014/07/1374-amaro-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-amaro { -webkit-filter: hue-rotate(-10deg) contrast(0.9) brightness(1.1) saturate(1.5); filter: hue-rotate(-10deg) contrast(0.9) brightness(1.1) saturate(1.5); }
1977
![1977 Instagram Filter Example](/assets/wp-content/uploads/2014/07/1374-1977-300x300.jpg)
Original Instagram Filter
![No Filter Instagram example](/assets/wp-content/uploads/2014/07/1374-nofilter-300x300.jpg)
CSS Filter
.ig-1977 { -webkit-filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2) contrast(0.8); filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2) contrast(0.8); }
See also
- CSS Filter Playground – This shows all of the different filters available in CSS3.
- CSS Background Blend Modes – I didn’t use this method because I didn’t want to resort to using background images, but it shows how you can get some pretty awesome blend effects using CSS3
- CSS Filter Effects – this has a handy slider tool that also generates the CSS on the fly!
- CSS3 Filters Browser Support
Let us know
If you managed to get a better match to the Instagram filters by playing around with the CSS Filters, we would love to know. Please leave a comment and we’ll include a link to you if you provide something useful.