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.