Quick Code
Published in

Quick Code

8 CSS image filters with code examples

Duomly — programming online courses

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.

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.

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:

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.

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:

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:

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:

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:

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:


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

Duomly — programming online courses



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store