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:

No Filter Instagram example

X-PRO 2

X Pro 2 Instagram filter example
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original (Instagram) Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
CSS Filter
.ig-brannan {
  -webkit-filter: sepia(0.5) contrast(1.4);
  filter: sepia(0.5) contrast(1.4);
}

Amaro

Amaro Instagram filter example
Original Instagram Filter
No Filter Instagram example
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
Original Instagram Filter
No Filter Instagram example
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

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:

11 thoughts on “Instagram filters recreated using CSS3 filter effects”

  1. Hi Designpieces Team,
    hope you are ok!
    I have a business proposal for you.
    Please write me back so we can discuss!

    Thanks!


    RedMas Digital Advertising Solutions Antonela Coco
    Media Buyer
    antonela@redmas.com
    Santos Dumont 3429, Piso 6, Buenos Aires, Argentina
    Tel: 5411-4556-1737

    RedMas is a part of Cisneros Interactive

  2. Nick, thank you for taking the time to do this. I’m writing an app that needed filters and this blog came in perfectly. I’ve been using it as a reference since I started my project.

    Thank you thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *