The filter property allows you to define visual effects that can be applied to HTML elements to modify their appearances, such as adjusting 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.
Filters
blur()
This filter applies a blur effect to the element. It accepts a blur radius as the input. A larger radius will make the image more blurred.
1#cat1 {
2 filter: blur(0px);
3}
4
5#cat2 {
6 filter: blur(5px);
7}
8
9#cat3 {
10 filter: blur(10px);
11}
brightness()
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, and values higher than that will make the element brighter.
1#cat1 {
2 filter: brightness(50%);
3}
4
5#cat2 {
6 filter: brightness(100%);
7}
8
9#cat3 {
10 filter: brightness(150%);
11}
contrast()
The function controls the contrast of the element, and it works similarly to the brightness() function. The function also 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.
1#cat1 {
2 filter: contrast(50%);
3}
4
5#cat2 {
6 filter: contrast(100%);
7}
8
9#cat3 {
10 filter: contrast(150%);
11}
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.
1#cat1 {
2 filter: grayscale(25%);
3}
4
5#cat2 {
6 filter: grayscale(50%);
7}
8
9#cat3 {
10 filter: grayscale(100%);
11}
hue-rotate()
This function will perform a hue rotation on the image based on the provided rotation degree, from 0deg to 360deg.
So, if we perform a 90deg hue rotation, the green color in the original image will become blue.
1#cat1 {
2 filter: hue-rotate(90deg);
3}
4
5#cat2 {
6 filter: hue-rotate(180deg);
7}
8
9#cat3 {
10 filter: hue-rotate(270deg);
11}
invert()
Inverts the original image. 0% is the original, and 100% inverts the image completely.
1#cat1 {
2 filter: invert(0%);
3}
4
5#cat2 {
6 filter: invert(50%);
7}
8
9#cat3 {
10 filter: invert(100%);
11}
opacity()
Controls the image's opacity from 0% (completely invisible) to 100% (completely visible).
1#cat1 {
2 filter: opacity(25%);
3}
4
5#cat2 {
6 filter: opacity(50%);
7}
8
9#cat3 {
10 filter: opacity(100%);
11}
saturate()
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.
1#cat1 {
2 filter: saturate(50%);
3}
4
5#cat2 {
6 filter: saturate(100%);
7}
8
9#cat3 {
10 filter: saturate(150%);
11}
sepia()
Sepia is a reddish-brown color, which makes the image appear old. The function accepts values from 0% to 100%.
1#cat1 {
2 filter: sepia(0%);
3}
4
5#cat2 {
6 filter: sepia(50%);
7}
8
9#cat3 {
10 filter: sepia(100%);
11}
drop-shadow()
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.
1#cat1 {
2 filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
3}
4
5#cat2 {
6 filter: drop-shadow(5px 10px 5px rgba(255, 0, 0, 0.5));
7}
8
9#cat3 {
10 filter: drop-shadow(10px 5px 15px rgba(0, 255, 0, 0.5));
11}
The filter functions discussed above can also be used together to create a more complex effects. For instance:
1#cat {
2 filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)) saturate(150%);
3}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 of the content behind an element while keeping the element's content unaffected.
For example, you can use the backdrop filter to create a glassmorphism effect like this:
1<body>
2 <img src="cat.jpg" alt="cat" width="200px" id="cat" />
3 <div class="glass"></div>
4</body>1.glass {
2 position: absolute;
3 top: 50px;
4 left: 30px;
5 width: 150px;
6 height: 150px;
7 backdrop-filter: blur(5px);
8 -webkit-backdrop-filter: blur(5px); /* Make Safari compatible */
9 border-radius: 10px;
10 margin: auto;
11 z-index: 1; /* Place the glass on top of the image */
12}
13
14#cat {
15 position: relative;
16 z-index: 0; /* Ensure the image is behind the glass */
17}
In this example, the z-index property is used to order the elements when they are stacked on top of each other.