filter property in CSS

The filter property in CSS is used to apply graphical effects and transformations to an element’s rendering. It allows you to modify the appearance of elements, such as images and background images, without the need for complex image editing. The filter property supports a variety of filter functions that can be combined to create various visual effects. Some common use cases for the filter property include:

1. Grayscale: Convert an element to grayscale, making it appear in shades of gray. This can be useful for creating a monochrome effect or desaturating images.

cssCopy code.filter-grayscale {
  filter: grayscale(100%);
}

2. Blur: Apply a blur effect to an element, making it appear out of focus or with a softer appearance.

cssCopy code.filter-blur {
  filter: blur(5px);
}

3. Brightness: Adjust the brightness of an element, making it brighter or darker.

cssCopy code.filter-brightness {
  filter: brightness(150%);
}

4. Contrast: Adjust the contrast of an element, increasing or decreasing the difference between light and dark areas.

cssCopy code.filter-contrast {
  filter: contrast(150%);
}

5. Sepia: Apply a sepia tone to an element, giving it a vintage, brownish look.

cssCopy code.filter-sepia {
  filter: sepia(100%);
}

6. Hue Rotate: Rotate the colors of an element around the color wheel.

cssCopy code.filter-hue-rotate {
  filter: hue-rotate(90deg);
}

7. Invert: Invert the colors of an element, creating a negative effect.

cssCopy code.filter-invert {
  filter: invert(100%);
}

8. Opacity: Adjust the transparency of an element, making it more or less opaque.

cssCopy code.filter-opacity {
  filter: opacity(50%);
}

9. Saturate: Adjust the saturation of an element, making it more or less vibrant.

cssCopy code.filter-saturate {
  filter: saturate(200%);
}

10. Drop Shadow: Add a drop shadow effect to an element.

cssCopy code.filter-drop-shadow {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
}