CSS Filters

CSS filters are a set of functions that can modify an element's rendering before it is displayed on the screen.

These filters can adjust elements in various ways, such as blurring, altering color, and adding shadows, making it easy to achieve complex visual effects directly in the browser.

In this article, we will look at different filters, how to use them, and what they achieve:

CSS Filters

Blur: Softens the image or element, making it appear out of focus.

filter: blur(5px);

Brightness: Makes the element brighter or darker.

filter: brightness(0.5);

Contrast: Increases or decreases the contrast of the element.

filter: contrast(200%);

A value under 100% decreases the contrast, while a value over 100% increases it.

Grayscale: Converts the element’s colors into shades of gray.

filter: grayscale(100%);

Hue-Rotate: Changes the colors by rotating the color spectrum.

filter: hue-rotate(90deg);

Invert: Reverses the colors of the element.

filter: invert(100%);

Opacity: Makes the element more transparent.

filter: opacity(50%);

Saturate: Increases or decreases the intensity of colors.

filter: saturate(200%);

Sepia: Gives the element a warm, brown tone, similar to old photographs.

filter: sepia(100%);

Drop-shadow: Adds a shadow that appears behind the element.

filter: drop-shadow(2px 2px 4px black);

What filter is your most used?