What is the use of the filter Property in CSS?

The Filter property in CSS is a tool used for applying visual effects to elements, altering their appearance or rendering. It allows us to apply a variety of filters, such as adjusting brightness, contrast, blurring, and more.

Note: More than one filter can be added to the HTML element which is separated by the space.

Syntax

filter: none | blur( ) | brightness( ) | contrast( ) | drop-shadow( ) |
grayscale( ) | hue-rotate( ) | invert( ) |opacity() | saturate( ) | sepia( ) |
url( );

Common Functions

• grayscale(value): Converts the element to grayscale. The value is a percentage (0% for no grayscale, 100% for full grayscale).
• blur(value): Applies a blur effect to the element. The value is a length, representing the radius of the blur.
• brightness(value): Adjusts the brightness of the element. The value is a percentage (0% for black, 100% for normal brightness).
• contrast(value): Adjusts the contrast of the element. The value is a percentage (0% for no contrast, 100% for normal contrast).
• sepia(value): Applies a sepia tone to the element. The value is a percentage (0% for no sepia, 100% for full sepia).

Combining Functions

Multiple filter functions can be combined to achieve complex visual effects.

.element {
    filter: brightness(120%) contrast(80%);
}

Uses of the filter Property

• Allows modification of image properties like brightness, contrast, saturation, and hue.
• Enables the application of visual effects such as blurring, grayscale, and inverting colors.
• Can be applied to background images or elements with background properties.
• Ideal for creating dynamic hover effects by transitioning between filtered and unfiltered states.
• Provides a way to apply consistent visual effects across different browsers.
• Allows the combination of multiple filters for more complex visual transformations.
• Enhances the appearance of UI elements by applying subtle filters for a polished and modern look.