Cool Instagram style image filters just using CSS

Ever wanted to recreate Instagram filters on your website using CSS3?

Probably not, but it is a pretty cool way of quickly adding some style to your images on your website without using Photoshop.

Here is a picture of the Clicky girls on International Women’s Day which has not been filtered:

happy-team
Now here is filtered with the code above each one…

X-Pro 2 Filter
.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); }
happy-team

Willow Filter
.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); }
happy-team

Walden Filter
.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); }
happy-team

Valencia Filter
.valencia { -webkit-filter: sepia(0.15) saturate(1.5) contrast(0.9); filter: sepia(0.15) saturate(1.5) contrast(0.9); }
happy-team

Toaster Filter
.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); }
happy-team

Sutro Filter
.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); }
happy-team
Nashville Filter
.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); }
happy-team
Amaro Filter
.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);}
happy-team
1977 Filter
.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);}
happy-team
Thats it! I’m sure you will have fun tweaking the settings to make them absolutely perfect but I’m sure you’ll agree they are a really simple way of adding some style to your images without editing.

Written by Oli Yeates

CEO/Founder

Follow Oli on Twitter