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

.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

.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

.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

.ig-valencia { -webkit-filter: sepia(0.15) saturate(1.5) contrast(0.9); filter: sepia(0.15) saturate(1.5) contrast(0.9); }

Toaster

.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 .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 .ig-sierra { -webkit-filter: contrast(0.8) saturate(1.2) sepia(0.15); filter: contrast(0.8) saturate(1.2) sepia(0.15); } Rise .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 .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 .ig-mayfair { -webkit-filter: saturate(1.4) contrast(1.1); filter: saturate(1.4) contrast(1.1); } Lo-Fi .ig-lofi { filter: contrast(1.4) brightness(0.9) sepia(0.05); -webkit-filter: contrast(1.4) brightness(0.9) sepia(0.05); } Kelvin .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 .ig-inkwell { -webkit-filter: grayscale(1) brightness(1.2) contrast(1.05); filter: grayscale(1) brightness(1.2) contrast(1.05); } Hudson .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 { -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 .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 .ig-brannan { -webkit-filter: sepia(0.5) contrast(1.4); filter: sepia(0.5) contrast(1.4); } Amaro .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 .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.

Related posts: