How to use the filter property for CSS styling?

by

Filters in CSS are powerful tools to add visual effects, they act like Photoshop filters for the browser. filter property for CSS has access to effects like blur, contrast, brightness, and many others you use while editing pictures. These filters are applied before an element is rendered. They can be applied to images, backgrounds, or borders.

The filter property

We can add properties like adjusting colors, image transformations, and blurring to an image. They modify an element’s appearance without changing the actual content.

The syntax to use the filter property is as shown below.

.element {
  filter: blur(5px);
  filter: grayscale(1.5);
  filter: saturate(2.1);

  filter: none; /* removes any existing filter */
}

There are a number of functions that we can pass for the filter property. The table below shows each, an example of how it is used, and the outcome attained.

brightness()

filter: brightness(0.8);
or
filter: brightness(80%);

We can change the brightness of an input image. A value of 100 will leave the image unchanged while that of 0 will turn it to complete dark.

blur()

filter: blur(7px);
or
filter: blur(1.2rem);

The px value defines how many pixels will blend into each other. Hence, a larger value will create a more blur image.

contrast()

filter: contrast(7);
or
filter: contrast(700%);

Works like the brightness filter where a value of 0% makes the image completely black while that of 100% leaves it unchanged. We can also add values above 100%, they will result in lesser contrast.

drop-shadow()

filter: drop-shadow(2px 2px 5px rgb(0 0 0 / 0.5));
or
filter: drop-shadow(4px 4px red); /* no blur */

The drop-shadow effect is similar to box-shadow, which adds a blurred vision of the image in the specified direction.

grayscale()

filter: grayscale(30%)
or
filter: grayscale(0.3);

This filter raises the grayscale of an image. 0% leaves the input unchanged, while of 100% makes it completely gray. Adding varying values in between defines the amount of grayscale added to an image.

invert()

filter: invert(100%);

Inverts an input image to the specified amount of value. 100% will completely invert an image, while 0% keeps it unchanged.

sepia()

filter: sepia(0.8); 
or 
filter: sepia(80%);

Adds the sepia effect to an input image. The value of 0% keeps it unchanged while that of 100% will completely turn it to sepia. We cannot use negative values for this effect.

opacity()

filter: opacity(0.3);
or
filter: opacity(30%);

The filter applies transparency to an image. A value of 50% or 0.5 makes it partially visible, while that of 0 will make it completely transparent. 1 or 100% opacity keeps the image in the same state.

url()

filter: url()

The url() function gets the location of an XML file that will specify an SVG filter, this includes an anchor to a specific filter element.