Instagram CSS Classes

instagram.css

/**
 * @see http://designpieces.com/2014/09/instagram-filters-css3-effects/ for example
 */

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

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

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

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

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

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

.ig-sierra {
  -webkit-filter: contrast(0.8) saturate(1.2) sepia(0.15);
  filter: contrast(0.8) saturate(1.2) sepia(0.15);
}

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

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

.ig-mayfair {
  -webkit-filter: saturate(1.4) contrast(1.1);
  filter: saturate(1.4) contrast(1.1);
}

.ig-lofi {
  filter: contrast(1.4) brightness(0.9) sepia(0.05);
  -webkit-filter: contrast(1.4) brightness(0.9) sepia(0.05);
}

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

.ig-inkwell {
  -webkit-filter: grayscale(1) brightness(1.2) contrast(1.05);
  filter: grayscale(1) brightness(1.2) contrast(1.05);
}

.ig-hudson {
  -webkit-filter: contrast(1.2) brightness(0.9) hue-rotate(-10deg);
  filter: contrast(1.2) brightness(0.9) hue-rotate(-10deg);
}

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

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

.ig-brannan {
  -webkit-filter: sepia(0.5) contrast(1.4);
  filter: sepia(0.5) contrast(1.4);
}

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

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