How to Apply Instagram Filters in the Browser Using Pure CSS

Welcome to another Envato Tuts+ quick tip; in today’s video we’re going to talk about Instagram filters. If you’re an Instagram user (and probably even if you’re not) you’ll be aware that it offers you various different filters which you can apply to a photo you’re uploading. Nowadays you can achieve similar results in the browser using nothing more than CSS. Let’s take a look!

Watch Screencast

Instagram.css

Instagram.css is a library, available on Github, which does all the heavy lifting for you. Download it, then add it to your web page (or as an asset pulled into a CodePen pen).

Our markup looks a little like this:

<div class="demo-container">
  <figure>
    <img src="boat.jpg">
  </figure>
</div>

We have a demo-container which we’re using purely for positioning the image centrally. The <img> tag is wrapped in a <figure>, and it’s to that <figure> that we’re going to add some classes.

Adding a `filter-` Class

There are currently over forty filters available, all listed on the Github page. Here are one or two examples you can try yourself in the embedded pen below:

1977 filter-1977
Helena filter-helena
Kelvin filter-kelvin
Moon filter-moon
Poprocket filter-poprocket
Reyes filter-reyes
Sierra filter-sierra
Toaster filter-toaster
Valencia filter-valencia
Walden filter-walden

How Does it Work?

If you open up the unminified version of instagram.css you’ll see that each class applies the CSS filter property, like this for example:

.filter-1977 {
  filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
}

Others go a step further and add blend-modes to a pseudo element positioned above the image:

.filter-amaro::before {
  background: rgba(125, 105, 24, .2);
  content: "";
  mix-blend-mode: overlay;
}

The values applied to filter and mix-blend-mode alter the channels, saturation, and brightness of the image, combining to give us the Instagram-like effects. These are pretty powerful effects too, previously only possible in the browser with SVG.

Browser Support

CSS filters are reasonably well supported in modern browsers, including the latest version of Edge (13+). IE doesn’t offer support, and neither does IE Mobile. Take a look at CanIUse for more details.

Conclusion

That’s it for this quick tip; instagram.css offers a really rapid way to apply some cool effects to your images in the browser. Go and download it, play with it, and pull it apart to apply your own filters and effects.