What are the CSS Filters

The filter property allows you to define visual effects that modify the element's appearances, such as adjusting its brightness, contrast, saturation, and more.

The filters are most commonly applied to images, but they also work on other HTML elements.

Each filter is defined by a CSS function.

The blur() filter

The blur() filter applies a blur effect to the element.

It accepts a blur radius as the input. A larger radius will make the image appear more blurred.

#Img {
  filter: blur(0px);
}

filter: blur(4px)

The brightness() filter

The brightness() function controls the brightness of an element.

The function accepts a percentage value argument.

0% will make the element completely dark, 100% will be the original image. Values higher than 100% will make the element brighter.

#Img {
  filter: brightness(50%);
}

filter: brightness(100%)

The contrast() filter

The function controls the contrast of the element, and it works similarly to the brightness() function.

The function accepts a percentage value argument.

0% will make the element completely dark, 100% will be the original, and higher values will give the element more contrast.

#Img {
  filter: contrast(50%);
}

filter: contrast(100%)

The grayscale() filter

grayscale() turns the element into a grayscale image.

The function accepts percentage values from 0% to 100%. 0% will be the original, and 100% will turn the element black and white.

#Img {
  filter: grayscale(25%);
}

filter: grayscale(0%)

The hue-rotate() filter

This function will perform a hue rotation on the image based on the provided rotation degree, from 0deg to 360deg.

For example, if we perform a 90deg hue rotation, the green color in the original image will become blue.

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

filter: hue-rotate(0deg)

The invert() filter

This filter inverts the color in the original image. 0% is the original, and 100% inverts the image completely.

#Img {
  filter: invert(0%);
}

filter: invert(0%)

The opacity() filter

This filter adjusts the image's opacity from 0% (completely invisible) to 100% (completely visible).

#Img {
  filter: opacity(25%);
}

filter: opacity(100%)

The saturate() filter

Controls the saturation of the image.

100% is the original, values lower than that make the image less saturated, and values higher than that make the image more saturated.

#Img {
  filter: saturate(50%);
}

filter: saturate(100%)

The sepia() filter

Sepia is a reddish-brown color, which makes the image appear old. The function accepts values from 0% to 100%.

#Img {
  filter: sepia(0%);
}

filter: sepia(0%)

The drop-shadow() filter

This filter works similarly to the box-shadow property, which adds a drop shadow to the element.

The function accepts arguments that allow you to define the shadow position (horizontal and vertical offset), radius, and color.

#Img {
  /* filter: drop-shadow(<horizontal_offset> <vertical_offset> <radius> <color>; */
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

filter: drop-shadow(0px)

Using multiple filters

The filter functions discussed above can also be used together to create a more complex effects.

But you should remember that order matters. The filters will be applied from left to right.

#cat {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)) saturate(150%);
}

Backdrop filters

Besides the filter property, there is also a backdrop-filter, which allows you to apply filter effects to the area behind an element rather than the element itself.

It is primarily used to create effects like blurring, or adjusting the contrast between the main content and the element behind that content.

For example, you can use the backdrop filter to create a glassmorphism effect like this:

<img src="..." alt="demo" width="400px" id="demo" />
<div class="glass"></div>

.glass {
  position: absolute;
  top: 50px;
  left: 30px;
  width: 150px;
  height: 150px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* Make Safari compatible */
  border-radius: 10px;
  margin: auto;
  z-index: 1; /* Place the glass on top of the image */
}
 
#demo {
  position: relative;
  z-index: 0; /* Ensure the image is behind the glass */
}