20. Filters

Filters give us the ability to alter colors based on a specific algorithm. We can apply it to elements or images.

Essentials

Blur

.elemento {
  filter: blur(5px);
}

Brightness

.elemento {
  filter: brightness(2);
}

Contrast

.elemento {
  filter: contrast(200%);
}

Image shadow

It only works with SVGs.

x position, y position, blur, and color.

.elemento {
  filter: drop-shadow(30px 10px 4px green);
}

Grayscale or convert to black and white

.elemento {
  filter: grayscale(100%);
}

Color rotation of the HSL model

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

Image obtained from Stackoverflow where you will also find a complete explanation.

Invert

.elemento {
  filter: invert(100%);
}

Transparency

.elemento {
  filter: opacity(50%);
}

Saturation

.elemento {
  filter: saturate(50%);
}

Sepia

.elemento {
  filter: sepia(100%);
}

Multiple filters

filter: contrast(175%) brightness(3%);

More information