CSS Filters

The filter property defines visual effects (like blur and saturation) to an element (often <img>).

Common Filter Functions

1. blur(px): Applies a blur effect to the image.

filter: blur(5px);

2. brightness(%): Adjusts the brightness of the image to appear more bright or dark.

filter: brightness(200%);

3. contrast(%): Adjusts the contrast of the grayscale image.

filter: contrast(200%);

4. drop-shadow(h-shadow v-shadow blur spread color): Applies a drop shadow effect.

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

5. grayscale(%): Converts the image to grayscale. 100% is completely gray.

filter: grayscale(100%);

6. hue-rotate(deg): Applies a hue rotation on the image.

filter: hue-rotate(90deg);

7. invert(%): Inverts the samples in the image.

filter: invert(100%);

8. opacity(%): Sets the opacity level.

filter: opacity(50%);

9. saturate(%): Saturates the image.

filter: saturate(8);

10. sepia(%): Converts the image to sepia (reddish-brown).

filter: sepia(100%);

Example

img {
  filter: grayscale(100%);
  transition: filter 0.5s;
}

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