Instagram filters recreated using CSS3 filter effects

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.