CSS Filters

filter applies visual effects directly to elements.

Basic Syntax

filter: value;

Most Important Filters

filter: blur();
filter: brightness();
filter: contrast();
filter: drop-shadow();

1. blur()

Blurs the element.

Example

img{
  filter:blur(5px);
}

Result

Image becomes blurry.

2. brightness()

Controls light intensity.

Example

img{
  filter:brightness(150%);
}

3. contrast()

Controls difference between dark and light.

Example

img{
  filter:contrast(200%);
}

4. drop-shadow()

Adds shadow based on image shape.

Example

img{
  filter:drop-shadow(0 10px 20px black);
}