CSS Filter

The CSS filter property allows you to apply visual effects such as blurring, brightness, contrast, and more to an element. It can be used to enhance the appearance of images, text, and other elements without the need for graphic manipulation in a photo editor.

Key Points on CSS Filter:

• The filter property can be applied to any element, including images, text, and backgrounds.
• Filters are applied in the order they are written, and multiple filters can be combined using spaces.
• Common filter functions include blur(), brightness(), contrast(), grayscale(), and invert().
• Filters can enhance images, make elements stand out, or create stylistic effects like hover interactions.
• CSS filters can be used for performance optimization by applying visual effects directly in the browser.

Syntax for CSS Filter Property:

/* Example of filter property syntax */
                filter: function(value);
                
                /* Example of multiple filters */
                filter: blur(5px) brightness(1.2) grayscale(50%);

Examples of CSS Filter Functions:

The following examples demonstrate the usage of different filter functions:

                    img {
                    filter: blur(5px);
                        }

Output

                    img {
                    filter: brightness(1.5);
                        }

Output

                    img {
                    filter: grayscale(100%);
                        }

Output

Common CSS Filter Functions:

• blur: Applies a blur effect to an element. Example: blur(5px).
• brightness: Adjusts the brightness of an element. Example: brightness(1.5) (higher values increase brightness).
• contrast: Adjusts the contrast of an element. Example: contrast(200%).
• grayscale: Converts an element to grayscale. Example: grayscale(100%).
• invert: Inverts the colors of an element. Example: invert(100%).
• saturate: Increases or decreases the saturation of an element. Example: saturate(2).
• sepia: Applies a sepia tone to an element. Example: sepia(100%).
• hue-rotate: Applies a hue rotation to an element. Example: hue-rotate(90deg).

The filter property allows for dynamic styling and interaction, especially when combined with hover or active states. By using filters creatively, you can create visually rich and engaging web designs without relying on external images or editing tools.