How to apply a Filter to an Image in CSS ?

Applying filters to an image in CSS allows you to manipulate its visual appearance, adjusting properties like brightness, contrast, and color saturation. This is achieved using the filter property.

Note: The filter property can take various filter functions, each controlling a specific aspect of the image.

Syntax

/* Applying a grayscale filter to an image */
img {
  filter: grayscale(50%);
}

/* Applying multiple filters to an image */
img {
  filter: grayscale(50%) blur(2px) brightness(80%) contrast(120%);
}

Features

• Filter Functions:
  • grayscale( ): Converts the image to grayscale.
  • blur( ): Applies a blur effect to the image.
  • brightness( ): Adjusts the brightness of the image.
  • contrast( ): Adjusts the contrast of the image.
  • saturate( ): Adjusts the color saturation of the image.