how can we help?

tell us what you are looking to achieve & we will design a strategy to reach your goals. rather speak to someone? call 0800 222 9300.

Submit.

We'll do our best to respond within 2 working hours.

If you need a quicker response please call us on 0800 222 9300.

clicky.™

call 0800 222 9300 lines closed until Monday 9am

Get a quote.
fun / 2 years ago

Cool Instagram style image filters just using CSS.

Love Instagram's filters? Want to add them to your website's images using CSS. Here is how you do it...


Author.

Oliver Yeates

[CEO & Founder]

Published.

31/03/2016 @ 20:09pm

Topics.

/ /

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.

#more

company / 9 hours ago

Merry Christmas.

insight / 14 hours ago

The only guide to search you’ll need in 2018.

insight / 1 day ago

Social media statistics 2016 vs 2017.

insight / 2 days ago

5 digital design trends to look out for in 2018.

news / 3 days ago

Clicky shortlisted for Large Digital Agency of the Year 2018.

fun / 4 days ago

YouTube rewind 2017.

company / 4 days ago

Reevoo choose Clicky.

company / 1 week ago

Spotify Wrapped: Clicky’s year in music.

company / 1 week ago

Day in the life / Vic.

news / 1 week ago

Christmas opening hours.

insight / 3 weeks ago

How do the top 5 UK websites rank on Google Page Speed?.

company / 3 weeks ago

Jonney passes Google Academy “Digital Sales” Exam.

news / 3 weeks ago

Clicky Nottingham Update.

news / 3 weeks ago

Festive designs.

news / 4 weeks ago

Introducing Twitter Promote.

View more.

New

Little Mistress choose Clicky.

We’re incredibly excited to announce that Clicky will be partnering with leading online boutique fashion brand, Little Mistress!

learn more