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.
Contact Us