In this tutorial we’ll be achieving Instagram style CSS filters without the use of external libraries, plug-ins or editing software. We will cover how to use ten different filters as well as show you how to create your own custom filters. I’ll also be including code examples throughout or you can check out our Simple CSS Filters as a reference for all the filters used in this tutorial.
Instagram style visual filters can be achieved in numerous ways. You could use photo editing software such as Photoshop or online photo editors to apply pre-set filters over your photos. Alternatively you can get the same effect using CSS only. This method of photo editing comes with its advantages too, for example you can create interesting visual transitions to add a dynamic touch to your website or create your own custom effects.
For this tutorial all we need is our HTML document with our image and our CSS stylesheet which is where we will be able to manipulate and apply our CSS filters.
In order to create our photo filter we need two prefixes; filter and webkit-filter. Both of these properties will contain the attributes of our desired effect (e.g blur, drop-shadow, greyscale etc.) and we will then manipulate the values of these to modify the filter to what we want. It is worth noting that the value for filter and webkit-filter must match each other in order to work but this will be made clear in the examples provided.
Greyscale, Sepia & Invert
We’ll start with something simple, greyscale.
After filter and webkit-filter we have the name of our effect, greyscale, along with a parenthesis with a value inside. This value will allow us to change the intensity of the effect. Greyscale uses the value range, 0 to 100%, or alternatively 0.0 to 1. Exceeding this range will have no effect as it has already reached its maximum intensity. This is the same for sepia and invert.
Brightness, Contrast & Saturate
However there are filters that are effective using values exceeding 100% such as brightness and contrast. This is because anything less than 100% will have a negative effect as it is a lower value than the original image (100%). This also applies to effects like saturate where a value less than 100% will desaturate the colours of the image which can still be a desirable effect.
Opacity works in the opposite way. 100% and greater will be the same as the original image so we have to go lower to make the image opaque.
Blur & Drop-Shadow
Some filters require pixel values (px) to manipulate them. Blur requires pixel values that will act as a radius that will then take any image pixels in that radius and blend the colours together. For example, if I had my blur filter with a radius of 3px, it will only blend the colours within the space of that radius. The bigger the value, the more colours blended. It is worth noting that smaller values are recommended as anything greater than 5px can be a bit too blurry.
Drop-shadow also accepts pixel based values. However these values affect the position of a shadow effect surrounding the border of our image.
This effect requires additional values. The first affects the shadow border on the right hand side of the image. The second value is the same but affects the bottom of the image. The third is the distance the shadow spreads out to the right. The final value is colour which can be accepted as a colour name, hex code or RGB values.
The hue-rotate filter effect is based on the spectrum of colours in the shape of a wheel. For this effect we enter in a degree value (e.g 90deg) which will then shade our image to the colour on that part of the wheel. By using a colour wheel as a reference we can see how changing the position will give us different effects (e.g 90 degrees gives us yellow/green, 180 degrees will give us green/blue etc.).
Combining Multiple Effects
Lastly I’ll show you how to combine the effects discussed to create different effects similar to the pre-sets used by Instagram and Photoshop. This works by adding different filter effects after the filter and webkit-filter attributes. This requires some experimentation to figure out exactly how you want your custom filter to look however there are plenty of resources available to get an idea of how to create more complex filters such as CSS Filters.co.
A Note on Webkit & Rendering Engines
Earlier I mentioned the importance of filter and webkit-filter and how the vales had to match. You might also be asking why we need two similar lines of code to do the one feature. Webkit is an engine used to render HTML and CSS for Chrome and Safari. The webkit pre-fix is native to these two browsers only and will result in cross browser compatibility issues when used with other browsers. So what if you wanted to use what you learned in this tutorial for other browsers such as Firefox or IE/Edge? Well, we’d need to use different prefixes native to these browsers. For Firefox, we’d use the prefix –moz instead of –webkit and for IE/Edge we’d use -ms.
The filters used in this tutorial can all be found on our website, SimpleCSS.