8 CSS Image Filters With Code Examples

Using images, we can create an atmosphere, arouse happiness, smile, sadness, or any different emotion. With images, we can show a lot, and tell a lot as well; that’s why pictures are so widely used in the websites and applications.

Designers take care of how users will feel the website and what kind of emotions it will bring. Graphic designers can use advanced software to edit photos and add them filters, masks, or other effects that decide about the final look.

Sometimes it happens, that what was created by the designer, it’s difficult to code, and as developers, we pay attention to the performance of our code and want our websites to load fast. That often means that we have to decrease image size. It’s also a reason why we prefer to do effects created by the designer using code. Especially when we have to add an effect on hover or click, then we don’t want to load two images.

We can use code to add filters to the images easily, using CSS, for example, and in this article, I would like to show you how you can use filters to create an awesome effect.

Let’s start!

Filters in CSS

To create filters to the images in CSS, we use filter property, which defines visual effects using a few different functions. Each function may give a different result to the basic image. Also, it’s possible to add multiple filters to one image.

Let’s go one by one and see the result we may get.

1. grayscale(% | number)

The most popular filter added to the images is grayscale. It allows for creating a black and white photo. The grayscale function can take a percentage or a number argument. 0% means nothing will change, and 100% means the image will be converted to grayscale completely. If you will leave the value empty, it will take 100% by default. If you would like to set the value by numbers, it accepts the values from 0 to 1.

In the example above, you can see the original photo without any filters, the second one is an image with 0.5 value, and the last one is a fully grayscale photo.

2. sepia(% | number)

The sepia filter creates a reddish-brown color photo. The sepia() method works similar to grayscale; it also accepts values from 0% to 100% or from 0 to 1. Negative values are not allowed. Let’s see the examples:

In the example, you can see how sepia filter works. I think it’s a great idea to use it if you would like to make a feeling that the photo is a little bit oldish. That’s what came to my mind first after looking at the sepia image.

3. blur(px)

The blur effect makes the photo very fuzzy by applying the Gaussian blur effect. It is applicable to censorship or a background image where there’s no need to make a photo very sharp. blur() method also takes one argument, and the argument has to be a certain amount of pixels. The biggest value the larger blur will be. By default, the value is 0.

The first example is a basic image with no filter, the second one has 2px blur and is a little bit fuzzy, and at the last one, it’s almost impossible to recognize what’s on the photo.

4. brightness(% | number)

Another filter is brightness(), which allows adjusting the level of the brightness of the picture. It takes one parameter in percentage from 0% to 100%, and everything above makes the image brighter or as a number from 0 to 1 or above to make it brighter. By default, every image brightness is 100%. Let’s check how this filter behaves in the code example:

Images in the example are set to 0.5 and to 150%. You can notice the lowest number the more dark photos are and the opposite.

5. contrast(% | number)

The contrast() filter allows adjusting contrast of the pictures. If the value is set to 0% or 0 number, it will be totally dark, set to 100% or to 1, is the default, which means photo won’t be changed at all, and values above 100% or 1 will provide less contrast. Let’s see the example:

In the example above, I’ve decreased the contrast of the first picture to 10% and increased the contrast of the second photo to 200%.

6. saturate(% | number)

Saturation describes the intensity of colors, and the bigger the value of saturating filer is, the more vivid colors are. The default value of the image is 100% or 1, 0 means image is unsaturated, and everything above the 100% and 1 increases the saturation. Let’s see the example:

As you can see in the example, the second image is unsaturated and set to 20% of saturation, and the third image is set to 200% of saturation, and it’s visibly more vivid.

7. hue-rotate(deg)

First, let’s explain what is hue-rotate first because it may be confusing. It was for me. So, hue-rotation is a function where we specify the angle around the color circle. The input can be in deg or turns. It also accepts negative values. The maximum is 360deg, so even if we will set bigger value it works as in the circle, so for example, if you will set 450deg then the result will be as in 90deg, and if we put -10deg, the result will be like if we set 350deg (so 360deg - 10deg). Let’s take a look at the code example:

In the example above, you can see the four images, the first one is original, without any hue rotation, but it’s also how 360deg hue rotation looks like. The second image is set to 90deg of hue rotation, and it’s visible that green is very strong here. The third image is set to 180deg, and in this example, the image is bluer, and the last one set to -90deg (what is calculated to 240deg) is more reddish.

8. invert(% | number)

Another filter that may be applied to our images using CSS is inverted. It is used to invert samples on the image. The value which inverts function accepts is only positive. Let’s see the example:

In the codepen above, you can see three images. The first one is the original one, the next is inverted to 75%, and the last one is completely inverted (the value is 1).

Conclusion

Adding filters to images may be very handy sometimes, especially if you want to achieve an amazing visual effect.

In the article above, I presented 8 filtering methods and described values they accept to give you a cheatsheet for filters where you can just take a quick look and know what filter to apply to get the required result.

I hope you find it useful, also share your favorite filtering methods in comments, or maybe you create any stunning custom filters? Let me know!

Have a nice coding!

Twitter LinkedIn Pinterest