Filters

The filter property in CSS allows you to apply graphical effects like blurring, brightness adjustments, and color manipulation to elements. This property is especially useful for enhancing images, backgrounds, and even text.

Common Filter Functions

1. Grayscale: Converts the element to grayscale.

   filter: grayscale(100%);

2. Blur: Applies a Gaussian blur to the element.

   filter: blur(5px);

3. Brightness: Adjusts the brightness of the element.

   filter: brightness(150%);

4. Contrast: Adjusts the contrast of the element.

   filter: contrast(200%);

5. Opacity: Changes the opacity of the element.

   filter: opacity(50%);

6. Saturate: Saturates the colors of the element.

   filter: saturate(200%);

7. Hue-Rotate: Applies a hue rotation on the image.

   filter: hue-rotate(90deg);

8. Invert: Inverts the colors of the element.

   filter: invert(100%);

9. Sepia: Applies a sepia filter to the element.

   filter: sepia(60%);

10. Drop-Shadow: Applies a shadow to the element.

    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));

Combining Filters

You can combine multiple filters for more complex effects.

filter: grayscale(50%) brightness(120%) contrast(150%);

Best Practices

1. Performance: Filters can be resource-intensive. Use them judiciously to avoid performance issues.

2. Accessibility: Ensure that the use of filters does not affect the readability or accessibility of the content.

3. Fallbacks: Provide fallbacks for browsers that do not support CSS filters.

4. Testing: Always test the appearance across different browsers and devices to ensure a consistent experience.

5. Animation: Filters can be animated using CSS transitions or animations, but be cautious about performance.

Examples

Grayscale Image on Hover

img:hover {
  filter: grayscale(100%);
}

Brightness and Contrast Adjustment

img {
  filter: brightness(120%) contrast(150%);
}

Animated Blur Effect

img {
  transition: filter 0.3s ease;
}

img:hover {
  filter: blur(5px);
}