CSS filter

The CSS filter property is used to apply visual effects to an element, such as adjusting the color, brightness, contrast, and blur. It provides a way to transform the appearance of an element without modifying its layout or structure.

The filter property can take one or multiple filter functions, each separated by a space. Each filter function applies a specific visual effect to the element.

The syntax for the filter property is as follows:

selector {
  filter: filter-function1 filter-function2 ...;
}

• selector: Represents the CSS class or selector of the element to which the filters will be applied.
• filter-function1, filter-function2, etc.: Represents the individual filter functions to apply to the element. These functions can be one of the following filter functions:

1. blur(): Applies a Gaussian blur to the element, creating a blur effect. The higher the value, the more blurry the element becomes.
2. brightness(): Adjusts the brightness of the element. A value of 1 (default) means no change. Values greater than 1 increase brightness, while values less than 1 decrease brightness.
3. contrast(): Adjusts the contrast of the element. A value of 1 (default) means no change. Values greater than 1 increase contrast, while values less than 1 decrease contrast.
4. grayscale(): Converts the element to grayscale, removing color information. A value of 1 (default) means full grayscale, while 0 means no grayscale (full color).
5. hue-rotate(): Rotates the colors of the element. The value represents an angle in degrees, and the colors are shifted along the color wheel.
6. invert(): Inverts the colors of the element. A value of 1 (default) means no change, while 0 means full inversion (negative).
7. opacity(): Adjusts the opacity (transparency) of the element. A value of 1 (default) means no change, while 0 makes the element fully transparent.
8. saturate(): Adjusts the saturation of the element. A value of 1 (default) means no change, while values greater than 1 increase saturation, and values less than 1 decrease saturation.
9. sepia(): Applies a sepia-tone effect to the element. A value of 1 (default) means full sepia, while 0 means no sepia.

Example:

img {
  filter: grayscale(1) blur(3px);
}

In this example, all <img> elements will have a grayscale effect (converted to black and white) and a blur effect with a radius of 3px.

The filter property is supported in modern browsers, but some filter functions may have limited support in older versions or Internet Explorer. It’s important to test and consider browser compatibility when using the filter property.

The filter property is a powerful tool for adding visual effects to elements, creating unique designs, and enhancing the aesthetics of your web page. However, excessive use of filters can negatively impact performance, so use them thoughtfully and sparingly to achieve the desired visual effects without sacrificing usability and performance.