CSS filter is a powerful property that allows you to apply visual effects to elements, such as images, backgrounds, or even text. It provides a range of effects like blur, brightness, contrast, grayscale, sepia, and more. These effects can be used to enhance the aesthetics of your webpage, creating various image manipulations and visual enhancements without needing to edit the actual content.
- Blur: Applies a blur effect to the element, making it appear out of focus.
- Brightness: Adjusts the brightness of the element.
- Contrast: Controls the contrast between light and dark areas of an element.
- Grayscale: Converts the element to grayscale.
- Hue-rotate: Rotates the colors of the element by a given degree (0 to 360 degrees), changing the hue of the colors.
- Invert: Inverts the colors of the element, making light colors dark and dark colors light.
- Saturate: Increases or decreases the saturation of colors in the element.
- Sepia: Adds a sepia tone to the element, creating a warm, brownish effect.