[CSS] How to use filters?

After reading this article, you will know how to change the image using the filter CSS property .

Please read to the end!

What are CSS filters?

CSS filter is a property that allows you to apply filters to elements such as images and change saturation, brightness, hue, etc.

In addition to adjusting the color, it is also possible to add blur and change the transparency.

If you want to process images used in web pages, you can use software such as Photoshop, but simple processing can be done with CSS.

Filters are not compatible with IE11, but are available in most modern browsers.

Specifically, it is described as follows.

<img src="sample.jpg" class="example">

.example {
  filter: contrast(60%);
}

The above specification sets the contrast of the image to 60%.

Introducing filter types

There are a total of 10 types of filters that can be specified, including the aforementioned contrast .

Here, let’s explain how to use each.

blur

blur allows you to specify how blurry the image is .

.example {
  filter: blur(2px);
}

Units are units such as px and em. Note that % cannot be used.

Let’s actually enter the numbers and make adjustments while checking how much blur is included.

brightness

brightness specifies the brightness of the image .

.example {
  filter: brightness(150%);
}

100% is the standard. Increasing from 100% makes it brighter, and decreasing it makes it darker.

You can also enter a 1-based number without a unit.

1 is the base, higher than 1 makes it brighter, 0 is the darkest.

The brightness(150%) in the above code means the same as 1.5, which means 1.5 times the brightness of the original image.

contrast

contrast specifies the contrast of the image .

.example {
  filter: contrast(120%);
}

100% is the standard as well as brightness. Anything higher than 100% will increase the contrast.

If you make it smaller, the contrast will decrease.

Contrast is the difference between bright and dark areas. Contrast (0%) produces a gray image.

This can also be specified based on 1. 0 is the lowest contrast.

drop-shadow

drop-shadow can add a shadow to an image .

.example {
  filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.7));
}

There are four arguments: “X-axis position”, “Y-axis position”, “Blur size”, and “Shadow color”.

The first two are mandatory. By determining the position, you can add a shadow that is offset from the image.

A similar property is box-shadow.

Even though this is a png image with a transparent background, the shadow is cast along the square around the element.

filter: drop-shadow() is great for adding shadows to objects in your image.

grayscale

grayscale can apply grayscale to the image .

.example {
  filter: grayscale(80%);
}

0% is the standard, and 100% is completely grayscale (coloring with only gray).

There is also a way to specify a value between 0 and 1. In this case, 1 is fully grayscaled.

hue-rotate

hue-rotate can change the hue .

.example {
  filter: hue-rotate(45deg);
}

The value specifies the rotation of the color wheel.

The unit is deg, and the standard value is 0deg.

At 180deg, the hue is reversed, and at 360deg, it becomes the original hue. Since 360 ​​or more is more than one circle, it will be the same hue as the one that specifies the remainder after dividing by 360.

invert

invert specifies how much to invert the gradation.

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

0% is the standard, and gradation is completely reversed at 100%.

There is also a way to specify a value from 0 to 1 with 0 as the base.

opacity

opacity specifies the opacity of the image .

.example {
  filter: opacity(30%);
}

100% is the most opaque and shows the original image.

0% is completely transparent.

There is also a way to specify a value between 0 and 1, where 0 is the most transparent and 1 is the most opaque.

saturate

saturate specifies the saturation of the image .

.example {
  filter: saturate(160%);
}

100% is the standard, and if it is larger than 100, it becomes vivid. Anything less than 100 desaturates the color and makes it darker.

0 is achromatic.

filter: saturate(0%) and filter: grayscale(100%) are filters that give the same result.

It can also be specified based on 1. 0 is achromatic and 1 or more is bright.

sepia

sepia makes the image sepia tone .

.example {
  filter: sepia(80%);
}

0% is the standard, and 100% is the most sepia tone.

You can also specify a number from 0 to 1 with 0 as the base.

How to use filters

Let’s take a look at how to use filters in practice.

Here, we will explain “How to apply multiple filters” and “How to add animation” .

apply multiple filters

Multiple filters can be applied to one element by lining up the filters with a space between them.

.example {
  filter: contrast(50%) blur(3px);
}

Above we apply 50% contrast and 3px blur.

You can apply any number of filters. Try out different combinations.

When multiple filters do not apply

If you intend to apply multiple filters but they are not applied, please check how to write them in CSS.

.example {  
  filter: contrast(50%);  
  filter: blur(3px);  
}

If you specify multiple filter properties, the definitions will be overridden and the last one will take effect .

The above code only applies blur and does not change the contrast.

If you want to specify multiple filters, write them all in one filter property.

Animate the filter

Animation can be set by using the transition property in combination .

.example {
  transition: 0.3s;
}
.example:hover {
  filter: brightness(60%) blur(3px);
}

The above code will filter on mouse hover.

By adding transition: 0.3s, it will change like a soft filter when hovering.

Of course, you can also filter by triggering anything other than hover. Please, try it.

Summary: Use filters according to purpose

In this article, we have discussed the filter CSS property.

There are types of filters that can be specified with filter, and you can use them according to the purpose .

I also showed you how to combine multiple filters.