CSS Property : filter Explained !

The filter property in CSS is used to apply various visual effects to an element and its content. It allows you to control aspects of an element’s rendering, such as blurring, adjusting brightness, contrast, saturation, and more. This property is often used for creating visual effects and enhancing the appearance of images and other elements on a webpage. The filter property works with a variety of filter functions, each of which has specific parameters.

Here’s an overview of some common filter functions and their usage:

1. blur(): This function blurs the element and its content. You can specify the blur radius as the parameter, which determines the degree of blurriness.
2. brightness(): Adjusts the brightness of the element. A value of 1 is the original brightness, values less than 1 make it darker, and values greater than 1 make it brighter.
3. contrast(): Changes the contrast of the element. A value of 1 is the original contrast, values less than 1 reduce contrast, and values greater than 1 increase contrast.
4. grayscale(): Converts the element to grayscale, making it black and white. The parameter is optional and represents the level of grayscale.
5. saturate(): Adjusts the saturation of the element. A value of 1 is the original saturation, values less than 1 reduce saturation, and values greater than 1 increase saturation.
6. hue-rotate(): Rotates the hue of the element’s colors. The angle parameter represents the degree of rotation.
7. opacity(): Adjusts the opacity of the element. A value of 1 is fully opaque, and values less than 1 make it more transparent.
8. invert(): Inverts the colors of the element. The parameter specifies the level of inversion.
9. sepia(): Applies a sepia tone to the element. The parameter specifies the level of sepia.

You can combine multiple filter functions within the filter property to apply various effects to an element.

Keep in mind that the filter property is supported in modern web browsers, but it might not be supported in older versions of Internet Explorer. It’s a powerful tool for adding visual effects to your web content and can be particularly useful for creating dynamic and interactive user interfaces.

Demo : https://codepen.io/stoumann/pen/MWeNmyb

?? Subscribe for more videos like this : https://www.youtube.com/c/CodeCanvas?sub_confirmation=1