Image Filter CSS

The CSS filter property allows you to apply a variety of visual effects to elements like images, backgrounds, and borders. These effects can include blurring, adjusting brightness, contrast, and more. The filter property is a versatile tool for enhancing the visual presentation of web content.

Common Filter Functions

Here are some commonly used filter functions:

• Blur: Applies a Gaussian blur to the image.

  img { filter: blur(5px); }
  

• Brightness: Adjusts the brightness of the image.

  img { filter: brightness(200%); }
  

• Contrast: Changes the contrast of the image.

  img { filter: contrast(200%); }
  

• Drop Shadow: Adds a shadow effect around the image.

  img { filter: drop-shadow(8px 8px 10px gray); }
  

• Grayscale: Converts the image to grayscale.

  img { filter: grayscale(100%); }
  

• Hue Rotate: Rotates the hue of the image.

  img { filter: hue-rotate(90deg); }
  

• Invert: Inverts the colors of the image.

  img { filter: invert(100%); }
  

• Opacity: Sets the opacity of the image.

  img { filter: opacity(30%); }
  

• Saturate: Increases or decreases the saturation of the image.

  img { filter: saturate(800%); }
  

• Sepia: Applies a sepia tone to the image.

  img { filter: sepia(100%); }
  

Combining Multiple Filters

You can chain multiple filter functions together by separating them with a space. The order in which you apply the filters matters, as they are processed sequentially.

Example:

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

In this example, the image's contrast is increased by 200%, followed by a 150% increase in brightness.

Example Usage

Here is an example of applying multiple filters to an image:

img {
  filter: grayscale(50%) blur(5px);
}

In this case, the image is first converted to 50% grayscale, and then a blur effect is applied.

Browser Support

The filter property is supported by most modern browsers, but it is not compatible with Internet Explorer or older versions of Microsoft Edge (version 12 and below).

By using the filter property, you can create visually compelling effects on web elements, improving user experience and engagement.

For more information, check out:

• W3Schools CSS Filters
• MDN Web Docs - CSS Filters