The filter property applies visual effects like blur, brightness, and contrast to elements.

img {
  filter: blur(5px);
}

You can combine multiple filters:

img {
  filter: brightness(1.2) contrast(1.1) saturate(1.3);
}

blur()

Applies a Gaussian blur:

img {
  filter: blur(4px);
}

Value is the blur radius in px, em, or rem.

brightness()

Adjusts brightness:

img {
  filter: brightness(1.5);  /* 150% brightness */
}

• 0 = completely black
• 1 = normal
• >1 = brighter

contrast()

Adjusts contrast:

img {
  filter: contrast(1.5);  /* 150% contrast */
}

• 0 = completely gray
• 1 = normal
• >1 = more contrast

grayscale()

Converts to grayscale:

img {
  filter: grayscale(100%);  /* Fully grayscale */
}

Value: 0% (no change) to 100% (fully gray)

sepia()

Applies a sepia tone:

img {
  filter: sepia(100%);
}

saturate()

Adjusts color saturation:

img {
  filter: saturate(2);  /* Double saturation */
}

• 0 = desaturated (grayscale)
• 1 = normal
• >1 = more vivid

hue-rotate()

Rotates colors around the color wheel:

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

Value in degrees (0-360).

invert()

Inverts colors:

img {
  filter: invert(100%);
}

• 0% = no change
• 100% = fully inverted

Dark Mode Image Fix

Useful for adapting images to dark mode:

@media (prefers-color-scheme: dark) {
  .diagram {
    filter: invert(100%);
  }
}

opacity()

Sets transparency:

img {
  filter: opacity(0.5);  /* 50% transparent */
}

Similar to the opacity property but can be hardware-accelerated.

drop-shadow()

Adds a shadow that follows the element’s shape:

img {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
}

Parameters: x-offset y-offset blur-radius color

Unlike box-shadow, it follows transparent areas.

Common Patterns

Hover Effect

img {
  transition: filter 0.3s;
}

img:hover {
  filter: brightness(1.1) saturate(1.2);
}

Disabled State

.disabled {
  filter: grayscale(100%) opacity(0.5);
}

Image Overlay

.card-image {
  filter: brightness(0.8) contrast(1.1);
}

Lessons in this unit:

0:	Introduction
1:	How to Work with CSS Fonts
2:	How to Style Text with CSS Typography
3:	How to Use CSS Colors
4:	How to Use CSS Backgrounds
5:	▶︎ How to Use CSS Filters
6:	How to Use CSS Units
7:	How to Use the CSS calc() Function
8:	How to use Google Fonts
9:	RGB color codes