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.


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

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


call 0800 222 9300 lines closed until Monday 9am

Enquire Now.
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...


Oliver Yeates

[CEO & Founder]


31/03/2016 @ 20:09pm


/ /

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:


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); }


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); }


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); }


Valencia Filter

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


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); }


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); }


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); }


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);}


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);}


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.


news / 2 days ago

Merging the offline and online worlds – developing your brand.

insight / 4 days ago

16 social media updates from the Digital Growth Hub Conference 2018.

company / 6 days ago

A day in the life of Strategy and Insights.

insight / 6 days ago

How to utilise audience data (featuring Netflix’s Stranger Things).

news / 2 weeks ago

Halton Housing Website Launches.

company / 2 weeks ago

Mobile speed optimisation – UK Housing Market.

insight / 2 weeks ago

Google’s mobile page speed update.

news / 2 weeks ago

How to become GDPR compliant like Manchester United.

news / 3 weeks ago

New Sykes Holiday Cottages Projects Launch.

news / 3 weeks ago

MINTHIS: a masterpiece of design and unforgettable experiences.

insight / 3 weeks ago

How To Use And Interpret Google’s PageSpeed Insights.

company / 3 weeks ago

Raleigh select Clicky!.

company / 4 weeks ago

New starter / Hollie.

insight / 4 weeks ago

Top tips for writing a blog.

featured / 4 weeks ago

Free white paper: The Digitisation of the UK Housing Market.

View more.


a beautiful new site for neville johnson.

We’re so excited to announce the launch of our latest client website, Neville Johnson.

learn more